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动画都有一个完整的回调选项

参考： show() Docs

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 animate执行动画：

$('.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();
});

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

2 个答案: