javascript - jQuery 延迟和淡出有时不起作用

Question

我在多个元素上遇到了 delay() 和 hide() 的问题。

假设我有这样的事情：

<div id="one">
<p id="label1_one">text</p>
<p id="label2_one">text</p>
</div>

<div id="two">
<p id="label1_two">text</p>
<p id="label2_two">text</p>
</div>

<div id="three">
<p id="label1_three">text</p>
<p id="label2_three">text</p>
</div>

和脚本

function toogle(){
if (1){
$("#one").css("display", "inline-block");
$("#label1_two").css("display", "inline-block").delay(10000).fadeOut(1000);
$("#label2_two").css("display", "inline-block").delay(10000).fadeOut(1000);
$("#label1_three").css("display", "inline-block").delay(10000).fadeOut(1000);
$("#label2_three").css("display", "inline-block").delay(10000).fadeOut(1000);
}
if (2){
$("#two").css("display", "inline-block");
$("#label1_one").css("display", "inline-block").delay(10000).fadeOut(1000);
$("#label2_one").css("display", "inline-block").delay(10000).fadeOut(1000);
$("#label1_three").css("display", "inline-block").delay(10000).fadeOut(1000);
$("#label2_three").css("display", "inline-block").delay(10000).fadeOut(1000);
}
if (3){
$("#three").css("display", "inline-block");
$("#label1_one").css("display", "inline-block").delay(10000).fadeOut(1000);
$("#label2_one").css("display", "inline-block").delay(10000).fadeOut(1000);
$("#label1_two").css("display", "inline-block").delay(10000).fadeOut(1000);
$("#label2_two").css("display", "inline-block").delay(10000).fadeOut(1000);
}
}

每次某些元素在页面上保持可见。这是否存在一些已知问题。

或者有人可以向我指出其他解决方案。

Code is example from real situation. :)

在此先感谢，韦德兰

Answer 1

if(1) 

意味着它将始终访问您的 if 语句

如果您指的是divid，在您的 jQuery 中，您需要将其更改为以下内容：

$('#one').click(function(){
    //do something.
});

Answer 2

您可以尝试使用 .stop 方法（http://api.jquery.com/stop/），如果在尝试为已经动画对象设置动画时发生错误，调用 stop 将在开始之前清除所有动画

$("#label1_one").css("display", "inline-block").stop(true, true).delay(10000).fadeOut(1000);