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

每次单击时，都会将加载功能绑定到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
        }
    });
});

Jquery动画不等待回调

2 个答案: