Question

我正在尝试使用jquery在两个图像之间制作动画，然后逐渐消失，然后逐渐消失。

但是，我不能让它们同步行动，fadeIn（）总是在fadeOut（）完成之前被调用：

$(function() {
            var tabContainers = $('#tabwrap > div');
            var listItems = $('#tabwrap ul.tabnav li');
            listItems.click(function() {
                var second = tabContainers.filter($(this)[0].title);
                tabContainers.fadeOut('slow', function() {
                    second.fadeIn('slow');
                });

            $('#tabwrap ul.tabnav').removeClass('selected');
            $(this).addClass('selected');

            return false;
        }).filter(':first').click();

        listItems.hover(function() {
        });
    });

            $('#tabwrap ul.tabnav').removeClass('selected');
            $(this).addClass('selected');

            return false;
        }).filter(':first').click();

        listItems.hover(function() {
        });
    });

有什么想法吗？

干杯，艾德

Answer 1

我认为问题在于，当您调用fadeOut函数时，您的某些项目已经淡出，以便立即触发。

下面的代码经过测试并且有效，但可以进一步细化。我会把它留给你：

var tabContainers = $('#tabwrap > div');
var listItems = $('#tabwrap ul.tabnav li');
tabContainers.hide();
var $selectedDiv = $("#tab1").show();

listItems.click(function() {
    var $this = $(this);
    var $myDiv = $("#" + $this.text().toLowerCase());
    if ($selectedDiv.attr("id") != $myDiv.attr("id")) {
        $selectedDiv.fadeOut('slow', function() {
            $myDiv.fadeIn('slow');
        });
        $selectedDiv = $myDiv;
    }

    $('#tabwrap ul.tabnav').removeClass('selected');
    $(this).addClass('selected');

    return false;
});

Answer 2

编写的代码......

tabContainers.fadeOut('slow', function() {
    second.fadeIn('slow');
});

在fadeIn()完成后显式调用fadeOut()。你将fadeIn传递给fadeOut的第二个参数作为回调，在完成时执行。

你试过这个吗？

tabContainers.fadeOut('slow');
second.fadeIn('slow');

Answer 3

编辑：这里实际上是这样尝试

tabContainers.fadeOut(500);
setTimeout("FadeInImage();", 490);

function FadeInImage()
{
    tabContainers.hide();
    second.fadeIn('slow');
}

Answer 4

尝试排队动画，而不是在回调上运行它：

tabContainers.fadeOut('slow').queue(function() {
    second.fadeIn('slow');
    $(this).dequeue();
});

Answer 5

让jQuery等待动画结束的另一种方法是promise()方法。当代码的另一部分需要等待并且你没有处理你应该等待的对象时，这很好，你可以使用jQuery选择器获取它们然后调用promise来等待所有的返回的对象完成。

E.g。 $('.animating').promise().done(function( arg1 ) { alert( "Done animating."); });

无法使FadeIn和FadeOut同步行动？

5 个答案: