Question

我正在创建一个插件，当您点击链接时页面（或元素）淡出，当您加载页面时淡入。我的代码虽然没有在我的演示页面上工作，所以我问你是否可以看一下它？

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Smoode</title>
    <style>
        .container{
            margin:10px auto;
            background:#DDD;
            padding:10px;
            width:500px;
            border:5px solid #000;
        }
    </style>
</head>
<body>
    <div class="container">
        <a href="smoode.html" class="smoode">
            Smoode!
        </a><br />
        <a href="smoode.html">Not smoode</a>
    </div>
</body>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
(function( $ ){
    $.fn.smoode = function() {
        var settings = $.extend({
            // These are the defaults.
            linkClass: "*",
            fadeElement: "body",
            fadeDuration: "300"
        }, options );
        $(document).load(function(){
            $(settings.fadeElement).hide();
            $(settings.fadeElement).fadeIn(settings.fadeDuration);
        });
        return this.click(function(e){
            e.preventDefault();
            $(settings.fadeElement).fadeOut(settings.fadeDuration).setTimeout(function() {
              window.location.href = $(this).attr("href");
            }, settings.fadeDuration);
        });
    }; 
})( jQuery );

$(".smoode").smoode({
    fadeElement: ".container",
    fadeDuration: "1000"
});
</script>
</html>

我猜这个问题可能就在我使用“return”的地方，以及我如何从“设置”中输入变量，但我不知道应该怎么做。

Answer 1

(function ($) {
    $.fn.smoode = function (options) {
        var settings = $.extend({
            // These are the defaults.
            linkClass: "*",
            fadeElement: "body",
            fadeDuration: "300"
        }, options);

        $(document).load(function () {
            $(settings.fadeElement).hide();
            $(settings.fadeElement).fadeIn(settings.fadeDuration);
        });

        return this.click(function (e) {
            e.preventDefault();
            $(settings.fadeElement).fadeOut(settings.fadeDuration).setTimeout(function () {
                window.location.href = $(this).attr("href");
            }, settings.fadeDuration);
        });
    };
})(jQuery);

$(".smoode").smoode({
    fadeElement: ".container",
    fadeDuration: "1000"
});

Answer 2

将选项传递给插件，删除$(document).load(function(){ ...，因为文档没有onload函数，它永远不会触发，并使用回调动画方法，不需要超时（并且超时无法链接顺便说一句：

(function ($) {
    $.fn.smoode = function (options) {
        var settings = $.extend({
            linkClass: "*",
            fadeElement: "body",
            fadeDuration: "300"
        }, options);

        $(settings.fadeElement).hide().fadeIn(settings.fadeDuration);

        return this.click(function (e) {
            e.preventDefault();
            var self = this;
            $(settings.fadeElement).fadeOut(settings.fadeDuration, function () {
                window.location.href = self.href;
            });
        });
    };
})(jQuery);

$(function() {
    $(".smoode").smoode({
        fadeElement: ".container",
        fadeDuration: "1000"
    });
});

FIDDLE

在创建jQuery插件时遇到问题

2 个答案: