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

查看此 fiddle 例如如何使用 done：http://jsfiddle.net/gcnes8b2/1/

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

Answer 2

您每次点击时都将加载函数绑定到大图像。第一次点击加载函数被调用一次，第二次，它被调用两次。我怀疑一切都变得一团糟，因为您在同一个对象上触发多个 .fadeIns，并且它们是运行并行的。

只调用 $('#largeImage').load(...) 一次，而不是每次点击都调用。当然，您必须对捕获的 var 做些事情，但那是另一回事了。或者，调用 $('#largeImage').unbind().load(...)

如果难以理解，请替换此行：

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

与：

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

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

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

并调用 $('#largeImage').unbind();，一切似乎都正常，所以你也可以那样做。

Jquery 动画不等待回调

Jquery Animations not waiting for callback

javascript

jquery

fadein

jquery-callback