0

我正在开发一个 jQuery 幻灯片插件。我的一种方法是在图片之间来回切换。我在创建它方面非常成功，这是迄今为止特定方法的代码的一个孤立案例：

var images = $("#simpleslides").children("img");

$(".slideButtons ul li").on("click", "a", function() {

        var anchorIndex = $(this).parent().index();
        var $activeSlide = $("#simpleslides img:visible");
        var $targetSlide = $(images[anchorIndex]);

        if($activeSlide.attr("src") == $targetSlide.attr("src") || $targetSlide.is(":animated")) {

            return false;

        } else {

            $activeSlide.css({ "z-index" : 0 });
            $targetSlide.css({ "z-index" : 1 });

            $targetSlide.stop().fadeIn("slow", function() {

                $activeSlide.hide();

            });

        }

    });

这是一个在工作中看到它的小提琴：http: //jsfiddle.net/ase3E/

在大多数情况下，这可以按您的预期工作。当用户点击相应的数字时，它会在图片中淡出。

hide然而，当我快速点击时，我会遇到一些跳跃，偶尔会看到完整的幻灯片。如果你玩小提琴，你会看到我指的是尝试点击每个图像来查看。

我采用stop了我认为可以解决问题但没有解决的方法。我已将hide方法放在fadeIn回调之后，但这也无济于事。

我在这里做错了什么？

4

1 回答 1

0

LIVE DEMO:)

var images = $("#simpleslides").find("img");
$(".slideButtons ul").on("click", "li", function(e) {
    e.preventDefault();
    var i = $(this).index();
    images.eq(i).stop().fadeTo(500,1).siblings('img').fadeTo(500,0);
});
于 2013-02-24T22:06:16.923 回答