Question

我正在开发一个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方法，但这对情况也没有帮助。

我在这里做错了什么？

Answer 1

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);
});

jQuery幻灯片随索引和淡出而变化 - 跳跃

1 个答案: