javascript - 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

每次单击时，您都会将加载函数绑定(bind)到大图像。第一次单击，加载函数被调用一次，第二次，它被调用两次。我怀疑一切都变得一团糟，因为您在同一个对象上触发多个 .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();，一切似乎都正常，所以你也可以这样做。