Question

我遇到了我写的一个画廊剧本的问题。基本上，有一组缩略图和一个带箭头的大图像。单击缩略图时，当前图像淡出，当新图像加载时，它会淡入。我遇到的问题是，如果在转换过程中多次单击缩略图或箭头（就好像改变当前显示的图像），整个过程开始延迟。您点击的次数越多，他们就越能看到延迟。

所以说我在淡入淡出过渡期间点击了五次。在当前转换完成后，如果我点击另一个缩略图/箭头，脚本效果不会像它应该的那样立即开始，它会滞后几秒然后开始。

这是我的剧本：

$(".jTscroller a").click(function(event) {
    event.preventDefault();
    var last = $("#photo").attr("src");                 
    var target = $(this).attr("href");
    if (last != target) {
        $("#photo").stop(false,false).fadeTo("fast", 0, function() {
            $("#photo").attr("src",target);
            $("#photo").load(function() {
                $("#photo").fadeTo("fast", 1);
            });
        });
    };
});
$("#photo-area .arrow.left").click(function(event) {
    event.preventDefault();
    var current = $("#photo-area #photo").attr("src");
    var prev = $(".jTscroller a[href=\""+current+"\"]").prev("a").attr("href");
    var next = $(".jTscroller a[href=\""+current+"\"]").next("a").attr("href");
    if (typeof prev != "undefined") {
        if (prev != current) {
            $("#photo").stop(false,false).fadeTo("fast", 0, function() {
                $("#photo").attr("src",prev);
                $("#photo").load(function() {
                    $("#photo").fadeTo("fast");
                });
            });
        };
    };
});
$("#photo-area .arrow.right").click(function(event) {
    event.preventDefault();
    var current = $("#photo-area #photo").attr("src");
    var prev = $(".jTscroller a[href=\""+current+"\"]").prev("a").attr("href");
    var next = $(".jTscroller a[href=\""+current+"\"]").next("a").attr("href");
    if (typeof next != "undefined") {
        if (next != current) {
            $("#photo").stop(false,false).fadeTo("fast", 0, function() {
                $("#photo").attr("src",next);
                $("#photo").load(function() {
                    $("#photo").fadeTo("fast", 1);
                });
            });
        };
    };
});

JS小提琴：http://jsfiddle.net/G5VAf/7/

我对此修复的理论是添加一个布尔变量，该动画在动画完成时会被更改，但是50次我尝试过它并没有奏效。希望比我更熟练的人能想出来。

哦，我知道我应该把它缩小到一个较小的脚本，我只是想让它继续工作，然后走得更远......

更新：尝试实现下面提到的队列事项，现在它根本不会淡入。

$("#photo").animate({
    opacity: 0
}, {queue: false, duration: 500}, function() {
    $("#photo").attr("src",target);
    $("#photo").load(function() {
        $("#photo").animate({
            opacity: 1
        });
    });
});

更新2：想通了。最后的剧本：

$(document).ready(function() {
    $(".jTscroller a").click(function(event) {
        event.preventDefault();
        var last = $("#photo").attr("src");                 
        var target = $(this).attr("href");
        if (last != target) {
            $("#photo").stop(false,true).animate({
                opacity: 0
            }, {queue: false, duration: 500, complete: function() {
                $("#photo").attr("src",target);
                $("#photo").load(function() {
                    $("#photo").stop(false,false).animate({
                        opacity: 1
                    }, {queue: false, duration: 500});
                });
            }});
        };
    });
    $("#photo-area .arrow.left").click(function(event) {
        event.preventDefault();
        var current = $("#photo-area #photo").attr("src");
        var prev = $(".jTscroller a[href=\""+current+"\"]").prev("a").attr("href");
        var next = $(".jTscroller a[href=\""+current+"\"]").next("a").attr("href");
        if (typeof prev != "undefined") {
            if (prev != current) {
                $("#photo").stop(false,true).animate({
                    opacity: 0
                }, {queue: false, duration: 500, complete: function() {
                    $("#photo").attr("src",prev);
                    $("#photo").load(function() {
                        $("#photo").stop(false,false).animate({
                            opacity: 1
                        }, {queue: false, duration: 500});
                    });
                }});
            };
        };
    });
    $("#photo-area .arrow.right").click(function(event) {
        event.preventDefault();
        var current = $("#photo-area #photo").attr("src");
        var prev = $(".jTscroller a[href=\""+current+"\"]").prev("a").attr("href");
        var next = $(".jTscroller a[href=\""+current+"\"]").next("a").attr("href");
        if (typeof next != "undefined") {
            if (next != current) {
                $("#photo").stop(false,true).animate({
                    opacity: 0
                    }, {queue: false, duration: 500, complete: function() {
                    $("#photo").attr("src",next);
                    $("#photo").load(function() {
                        $("#photo").stop(false,false).animate({
                            opacity: 1
                        }, {queue: false, duration: 500});
                    });
                }});
            };
        };
    });
});

Answer 1

听起来您在使用动画队列时遇到问题。您正在使用的jQuery函数只是.animate()函数的简写。

.animate( properties, options )

  queue: A Boolean indicating whether to place the animation in the effects queue. If false, the animation will begin immediately. As of jQuery 1.7, the queue option can also accept a string, in which case the animation is added to the queue represented by that string.

基本上每次点击都会被添加到动画队列中，从而导致延迟。您可以尝试.animate()功能并将队列设置为false，看看是否有帮助。

单击太快时脚本滞后[jQuery]

1 个答案: