Question

我的问题在某种程度上与问题here有关。我正在尝试做一个显示消息的插件，之后将其淡出。

这是插件：

(function($) {
$.fn.showWarning = function(msg) {
    return this.each(function() {
        $(this).text(msg).show().hide(); // <-preloads message
        $(this).fadeIn('fast', function() {
            $(this).stop().text(msg);
            setTimeout(function() {
                $(this).fadeOut(300);
            }, 2500);
        });
    });
};
})(jQuery);

，整个代码在这里：http://jsfiddle.net/e5kns/6/

问题是消息没有消失，所以我认为它与 setTimeout 有关。也许$（this）没有引用它应该的位置？

Firebug 给出：

a.ownerDocument未定义

Chrome ：

未捕获的TypeError：无法读取未定义的属性'defaultView'

Answer 1

你可以

$(this).stop().text(msg).delay(2500).fadeOut(300)

<小时/> 事实上，this并未引用window以外的任何内容。因为浏览器正在调用超时回调，this设置为window。 this仅基于函数的调用方式。

setTimeout($.proxy(function() {
    $(this).fadeOut(300);
}, this), 2500);

会解决这个问题，因为它会生成另一个放弃this的函数，并使用提供的this并明确applie来解析原始函数。

Answer 2

试试这个，

(function($) {
    $.fn.showWarning = function(msg) {
        return this.each(function() {
            $(this).text(msg).show().hide(); // <-preloads message
            $(this).fadeIn('fast', function() {
                $this = $(this);
                $(this).stop().text(msg);
                setTimeout(function() {
                    $this.fadeOut(300);
                }, 2500);
            });
        });
    };
})(jQuery);

ps：正如@Esailija建议的那样，dealy和fadeout更好

jQuery - 插件中带有$（this）的setTimeout函数

2 个答案: