Question

我正在使用http://www.antiyes.com/jquery-blink-plugin在我的文档上闪烁图像。

该插件的代码是

(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("visibility") == "visible")
            {
                $(obj).css('visibility','hidden');
            }
            else
            {
                $(obj).css('visibility','visible');
            }
        }, options.delay);
    });
  }
}(jQuery))

但是我想在点击它时停止闪烁特定图像。目前我正在通过修改代码进行以下操作

    (function($) {
        $.fn.blink = function(options) {
            var defaults = { delay: 500, blinkClassName: 'blink' };
            var options = $.extend(defaults, options);

            return this.each(function() 
            {
                var obj = $(this);

                setInterval(function() 
                {
                    if ($(obj).attr('class').indexOf(options.blinkClassName) > -1) 
                    {
                        if ($(obj).css("visibility") == "visible")
                        {
                            $(obj).css('visibility', 'hidden');
                        }
                        else 
                        {
                            $(obj).css('visibility', 'visible');
                        }
                    }
                    else 
                    {
                        if ($(obj).css("visibility") != "visible") 
                        {
                            $(obj).css('visibility', 'visible');
                        }
                    }
                }, options.delay);
            });
        }
    } (jQuery))

我认为必须有更好的方法（可能使用jquery data（））但无法弄清楚如何做到这一点？

Answer 1

jQuery的data方法易于使用。这里的关键事实是setInterval返回一个值。该值是标识间隔的数字。您可以将此标识符提供给clearInterval以停止发生间隔。

所以你的代码看起来像这样：

return this.each(function()
{
    var obj = $(this);
    var intervalID = setInterval(function()
    {
        var isVisible = obj.data('blink-visible');
        obj
           .css('visibility', isVisible ? 'hidden' : 'visible')
           .data('blink-visible', !isVisible);
    }, options.delay);
    obj.data('blink-interval', intervalID);
});

然后你可以制作一个stopBlink方法：

$.fn.stopBlink = function() {
    return this.each(function() {
        var $el = $(this);
        var intervalID = $el.data('blink-interval');
        if (intervalID) {
            clearInterval(intervalID);
            $el.removeData('blink-interval');
            $el.css('visibility', 'visible');
        }
    });
};

其他几点说明：

.css('visibility', 'visible')是一种冗长的方式。您可以使用toggle方法：如果元素当前可见，则隐藏元素，如果元素被隐藏则显示该元素。这就是我上面所做的。
您无需在obj中包裹$()。 obj已经是一个jQuery选择（它是用$(this)创建的，所以额外的包装是完全没必要的。
非常认真地使用闪烁功能。它是突兀的，经常令人讨厌，并且可能对癫痫患者产生健康后果。

如何清除点击元素的间隔

1 个答案: