隐藏一个元素，而另一个元素显示？

Question

我需要一种方法来隐藏一个元素(.close-button)，而另一个元素(#loading-animation)正在显示。如何在jQuery中使用条件来实现这一点？

类似于：

while ($('#loading-animation').show(100);) {
    $('.close-button').hide();
}

显然这不起作用，但我如何才能正确地格式化它呢？

Answer 1

使用show( [duration ] [, complete ] )的完整回调

 $('.close-button').hide();
 $('#loading-animation').show(100, function(){
       $('.close-button').show();
 });

所有jQuery动画都有一个完整的回调选项

参考资料：显示()文档

Answer 2

如果您的动画是用CSS执行的(例如，css转换)

然后，您可以使用以下内容监视过渡结束事件：

$('.close-button').hide();
$("#loading-animation").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(event){ 
    //this will run when the css transitions on your #loading-animation end
    $('.close-button').show();
}).show();

或者可以使用jQuery动画执行动画：

$('.close-button').hide();
$("#loading-animation").animate({
    //do your transitions here
    //"left":"+=200"
}).promise().done(function(){
    //this will run when animate is done
    $('.close-button').show();
});