Jquery Animations not waiting for callback

Question

I have a Jquery animation that is running the code from its function before the animation is complete. the Page this code is being used at is no where near complete yet but if you want to take a look it's cottageboards.com/orderform

$('#snow').fadeIn(500, "linear", function () {
    $('#largeImage').fadeOut(500, function () {
        $('#largeImage').attr('src', selectedimg).load(function () {
            $('#largeImage').fadeIn(1000, function () {

//Everything below here is running before the above image's fade in is complete


                $('#snow').fadeOut(5000);
                var selection = 'input[name="' + $(selectionage).data('type') + '_selection"]';
                $($('#selected_thumb').val()).attr('src', $($('#selected_thumb').val()).data('regular'));
                $(selectionage).attr('src', $(selectionage).data('selected'));
                selectedid = '#' + $(selectionage).attr('id');
                $('#selected_thumb').val(selectedid);
                $('#selected_info').html($(selectionage).data('desc'));
                $('#name').html($(selectionage).data('name'));
                if ($(selectionage).data('val') === 99) {
                    $('#upload').show();
                    $('#displayinfo').hide();
                } else {
                    $(selection).val($(selectionage).data('val'));
                    $('#upload').hide();
                    $('#displayinfo').show();
                }
                $('#next').prop('disabled', false);
            });
        });
    });
});

When rewritten so the load function comes before the src change it works like a charm. Thanks for the help guys!

Working code:

$('#snow').fadeIn(500, "linear", function () {
    $('#largeImage').fadeOut(500, function () {
        $('#largeImage').unbind().load(function () {
            $('#largeImage').fadeIn(1000, function () {
                $('#snow').fadeOut(5000);
                var selection = 'input[name="' + $(selectionage).data('type') + '_selection"]';
                $($('#selected_thumb').val()).attr('src', $($('#selected_thumb').val()).data('regular'));
                $(selectionage).attr('src', $(selectionage).data('selected'));
                selectedid = '#' + $(selectionage).attr('id');
                $('#selected_thumb').val(selectedid);
                $('#selected_info').html($(selectionage).data('desc'));
                $('#name').html($(selectionage).data('name'));
                if ($(selectionage).data('val') === 99) {
                    $('#upload').show();
                    $('#displayinfo').hide();
                } else {
                    $(selection).val($(selectionage).data('val'));
                    $('#upload').hide();
                    $('#displayinfo').show();
                }
                $('#next').prop('disabled', false);
            });
        }).attr('src', selectedimg);
    });
});

Answer 1

You are binding the load function to largeimage every time you click. The first click the load function gets called once, the second time, it gets called twice. I suspect everything is getting messed up because you are firing multiple .fadeIns on the same object, and they are running in parallel.

Only call $('#largeImage').load(...) once, not on every click. Of course, you'll have to do something about your captured vars, but that's a different issue. Alternatively, call $('#largeImage').unbind().load(...)

If that's hard to follow, replace this line:

$('#largeImage').attr('src', selectedimg).load(function () {

with:

$('#largeImage').unbind().attr('src', selectedimg).load(function () {

I tested it by putting a break point after this line:

$('#thumbs').delegate('img','click', function() {

and calling $('#largeImage').unbind(); and everything seemed to work, so you can do it that way too.