jquery - 为什么我的 jquery 插件不起作用？

Question

我正在制作一个插件，但我没有得到任何结果，如果我将控制台放在函数中，以防万一我把它放在外面它可以工作。

问题是什么？任何人都可以帮我找出来吗？

我的代码：

(function ($){
    $.fn.slideIt = function () {
        this.fadeOut('normal', function(){
            console.log(this);
        });

}
})(jQuery);

这是小提琴

Answer 1

您的 jsFiddle 制作不正确。HTML 框应该只包含 HTML，将您的 JavaScript 放入JavaScript框中。

slideIt问题是，你在它被宣布之前就打电话了。

这是一个更新的示例：http: //jsfiddle.net/RW8R3/1/

Answer 2

使用文档就绪事件，当您调用插件时您的 div 不存在：

$(function(){
    $('#slideContainer').slideIt();
});

演示：http: //jsfiddle.net/RW8R3/2/

Answer 3

您正在打破“jQuery 的魔力”。该插件应如下所示：

(function($) 
{
    $.fn.slideIt = function()
    {
        return this.each(function()
        {
            $(this).fadeOut('normal', function()
            {
                console.log($(this));
            });
        });
    }
})(jQuery);

$('#slideContainer').slideIt();​

否则，您将无法执行 $('#slideContainer').slideIt().fadeIn("slow") 之类的操作。

工作演示在这里。