如何使用 jQuery 闪烁？答案

【问题标题】：How can I blink with jQuery?如何使用 jQuery 闪烁？
【发布时间】：2010-07-29 10:33:20
【问题描述】：

我想闪烁我的菜单文本。我有这段代码，但它不适用于 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()})

有人可以帮助我吗？谢谢！

【问题讨论】：

当你眼睛干涩的时候，你应该可以本能地做到这一点..
闪烁的唯一方法是不使用闪烁。阅读：我的眼睛在燃烧！
IE知道rgb(,,)吗？由于 IE 比石头更愚蠢，我会说是的。在这种情况下，我会很高兴使用 IE :)
IE 试图通过不使其工作来帮助您。具有讽刺意味的是。
您可以轻松地将 rgb(...) 调用更改为 #f00 以获得您知道符合标准的内容。

标签： jquery blink

【解决方案1】：

这里的Mini-Effects plug-ins 应该更简单——如果这是您从 UI 效果库中需要的全部内容（除了那些其他基本要素，“throb”、“shake”和“bob”），它会非常小且明显高效。

使用简单 - 只需加载您需要的迷你效果插件，然后只需在要闪烁的元素上调用 blink()。

<script type="text/javascript" charset="utf-8" src="javascripts/jquery.blink.min.js"></script>

然后，只需在一些大型鲜艳资源上调用 blink()：

$(".selector").blink();

【讨论】：

你指的是闪烁率（很确定它与主 UI 效果库中的闪烁方法相同）还是跨浏览器保真度，或者两者都不是？

【解决方案2】：

你将obj设置为$(this)，所以每次都必须调用obj而不是$(obj)。

只需替换

obj = $(this);

只要

obj = this;

但仍要考虑患有癫痫症、视力不佳等的人。

【讨论】：

其实这无关紧要。由于他在包装集上执行.each()，因此在此上下文中this 只是一个单一的DOM 元素。通过将其包装在$() 中，他再次使其成为一个 jQuery 集，但它仍然只是一个元素。
转念一想，我认为您可能正在做某事。但是将$(obj) 替换为obj 会更有效，并且只需执行一次重新包装。

【解决方案3】：

在资源管理器中：

if($(obj).css("color") == "rgb(255, 0, 0)")

不是真的，因为 IE 看到了这个：

 $(obj).css("color") == "rgb(255,0,0)";

数字之间没有空格。

您可以通过更改来修复它：

$(obj).css('color','rgb(255, 0, 0)');

$(obj).css('color','rgb(255,0,0)');

和

if($(obj).css("color") == "rgb(255, 0, 0)")

到

if($(obj).css("color") == "rgb(255,0,0)")

所以：

(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()})

已编辑：

            (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))

【讨论】：

已编辑。在这种情况下最好检查布尔值。

【解决方案4】：

您是否使用 Firebug 或 Chrome 中的内置开发人员工具检查了代码？我希望你需要改变

}(jQuery))

进入

})(jQuery)

（移动括号...）

【讨论】：