Jquery动画没有等待回调

Jquery Animations not waiting for callback

本文关键字：等待 回调 动画 Jquery      更新时间：2023-09-26

我有一个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);
    });
});

每次单击都会将加载函数绑定到largeimage。第一次点击加载函数会被调用一次，第二次，它会被调用两次。我怀疑一切都搞砸了，因为你在同一个对象上发射了多个.fadeIn，而且它们是并行运行的。

只调用$('#largeImage').load(...)一次，而不是每次单击。当然，你必须对你捕获的vars做点什么，但这是另一个问题。或者，呼叫$('#largeImage').unbind().load(...)

如果很难遵循，请替换以下行：

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

带有：

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

我通过在这条线后面放一个断点来测试它：

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

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

例如，请参阅此fiddle如何使用done：http://jsfiddle.net/gcnes8b2/1/

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