Question

How can I stop this function from happening twice when a user clicks too fast?

$(document).ready(function() {
    $(".jTscroller a").click(function(event) {
        event.preventDefault();
        var target = $(this).attr("href");
        $("#photo").fadeTo("fast", 0, function() {
            $("#photo").attr("src",target);
            $("#photo").load(function() {
                $("#photo").fadeTo("fast", 1);
            });
        });
    });
});

The issue I’m having is that if a user clicks too fast the element won’t fade back in, it just stays hidden.

The issue wasn’t what I thought it was. When I was clicking on the same thumbnail it would try to load in the same image and stick loading forever. The .stop() answer does fix double animation so I’m accepting that answer, but my solution was to check if the last clicked item was the currently displayed item. New 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().fadeTo("fast", 0, function() {
                $("#photo").attr("src",target);
                $("#photo").load(function() {
                    $("#photo").fadeTo("fast", 1);
                });
            });
        };
    });
});

Answer 1

Well you use the correct word in your descripton. Use stop()

$("#photo").stop().fadeTo("fast", 0, function() {