Question

I’m having an issue with a gallery script I wrote. Basically, there’s a set of thumbnails and a large image with arrows. When you click on a thumbnail, the current image fades out, and when the new image loads, it fades in. The issue I’m having is that if you click on a thumbnail or arrow a bunch of times during the transition (as if changing the currently displayed image), the entire process starts to get delayed. The more you click, they more you see the delay.

So say I click five times in the middle of the fade transition. After the current transition finishes, if I click on another thumbnail/arrow the scripts effect doesn’t start immediately like it’s supposed to, it lags for a few seconds and then starts.

Here’s my script:

$(".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 Fiddle: http://jsfiddle.net/G5VAf/7/

My theory for the fix is to add a Boolean variable that gets changed when the animation completes, but the 50 times I’ve tried it hasn’t worked. Hopefully someone more skilled than me can figure it out.

Oh, and I know I should shrink it down to one smaller script, I’m just trying to get this working before going any farther down that road…

Update: Tried implementing the queue thing mentioned below, and now it won’t fade in at all.

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

Update 2: figured it out. Final script:

$(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

Sounds like you are having problems with the animate queue. The jQuery functions you are using are just shorthand for the .animate() function.

.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.

Basically each click is then getting added to the animate queue hence the delay. You can try the .animate() function and set queue to false and see if that helps.