jQuery动画不等待回调

Question

我有一个Jquery动画，它在动画完成之前正在运行其功能中的代码。 此代码所在的页面尚不完整，但是如果您想看看它，那就是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);
            });
        });
    });
});

重写后，使加载功能先于src更改就可以了，就像魅力一样。 感谢您的帮助！

工作代码：

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

您每次单击都将load函数绑定到largeimage。 第一次单击load函数将调用一次，第二次将调用两次。 我怀疑一切都搞砸了，因为您在同一个对象上触发了多个.fadeIns，并且它们并行运行。

仅调用一次$('#largeImage').load(...) ，而不是每次单击。 当然，您必须对捕获的变量做一些事情，但这是另一个问题。 或者，调用$('#largeImage').unbind().load(...)

如果这很难遵循，请替换此行：

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

与：

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

我通过在此行之后放置一个断点来测试它：

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

并调用$('#largeImage').unbind(); 一切似乎都正常，因此您也可以这样做。

Answer 2

参见此小提琴示例，了解如何使用done ： http ： //jsfiddle.net/gcnes8b2/1/

$('span').click(function() {
    $('#1').fadeIn({
        duration: 1000,
        done:function(){
            $('#2').fadeOut(1000);
            // etc
        }
    });
});