How can I blink with jQuery?
I would like to blink my menu text. I have this code, but it doesn't work with IE.
(function($)
{
$.fn.blink = function(options) {
var defaults = { delay:500 };
var options = $.extend(defaults, options);
开发者_如何转开发
return this.each(function() {
var obj = $(this);
setInterval(function() {
if($(obj).css("color") == "rgb(255, 0, 0)")
{
$(obj).css('color','#000000');
}
else
{
$(obj).css('color','rgb(255, 0, 0)');
}
}, options.delay);
});
}
}(jQuery))
$(document).ready(function(){$('.blink').blink()})
Can someone help me? Thank you!
The Mini-Effects plug-ins should be simpler here--very small and clearly efficient if this is all you need from the UI Effects Library (aside from those other essentials, "throb", "shake", and "bob").
Simple to use--just load the mini-effects plugin you need, then just call blink() on the element you want to blink.
<script type="text/javascript" charset="utf-8" src="javascripts/jquery.blink.min.js"></script>
Then, just call blink() on some large brightly-colored resource:
$(".selector").blink();
You set obj as $(this), so you must call obj every time instead of $(obj).
Just replace
obj = $(this);
With just
obj = this;
But still think about people with epileption, bad sight, etc.
In explorer:
if($(obj).css("color") == "rgb(255, 0, 0)")
is not true, because IE sees this:
$(obj).css("color") == "rgb(255,0,0)";
Without spaces between numbers.
You can fix it by changing:
$(obj).css('color','rgb(255, 0, 0)');
$(obj).css('color','rgb(255,0,0)');
and
if($(obj).css("color") == "rgb(255, 0, 0)")
to
if($(obj).css("color") == "rgb(255,0,0)")
so:
(function($)
{
$.fn.blink = function(options) {
var defaults = { delay:500 };
var options = $.extend(defaults, options);
return this.each(function() {
var obj = $(this);
setInterval(function() {
if($(obj).css("color") == "rgb(255,0,0)")
{
$(obj).css('color','#000000');
}
else
{
$(obj).css('color','rgb(255,0,0)');
}
}, options.delay);
});
}
}(jQuery))
$(document).ready(function(){$('.blink').blink()})
EDITED:
(function($)
{
$.fn.blink = function(options) {
var defaults = { delay:500 };
var options = $.extend(defaults, options);
return this.each(function() {
var obj = $(this);
var state = false;
setInterval(function() {
if(state)
{
$(obj).css('color','#000000');
state = false;
}
else
{
$(obj).css('color','rgb(255,0,0)');
state = true;
}
}, options.delay);
});
}
}(jQuery))
Have you checked the code with Firebug, or the built-in developer tools in Chrome? I would expect you need to change
}(jQuery))
into
})(jQuery)
(move the parenthesis around...)
精彩评论