jquery .fadeIn .delay .fadeOut - 不會消失

不知道我在做什麼錯誤，但這些div正確褪色，但不fadeOut！jquery .fadeIn .delay .fadeOut - 不會消失

它們的目的是在結構化的時間軸與MP3的時間，因此延長時間長！

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
div { position: absolute; width: 60px; height: 60px; float: left; display:none; } 
.first { background-color: #3f3; left: 0;} 
.second { background-color: #33f; left: 80px;} 
.third { background-color: #3f3; left: 120px;} 
.fourth { background-color: #33f; left: 300px;} 
.fifth { background-color: #3f3; left: 400;} 
</style> 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 
    <script src="http://ui.jquery.com/latest/ui/effects.core.js"></script> 
<script src="http://ui.jquery.com/latest/ui/effects.slide.js"></script> 
</head> 
<body> 

<p><button>Run</button></p> 
<div class="first"></div> 
<div class="second"></div> 
<div class="third"></div> 
<div class="fourth"></div> 
<div class="fifth"></div> 

<script> 
    $("button").click(function() { 
     $("div.first").delay(15060).show("puff", {}, 300).delay(116010).fadeOut(300); 
     $("div.second").delay(40230).show("puff", {},300).delay(28990).fadeOut(300); 
     $("div.third").delay(46180).show("puff", {},300).delay(27880).fadeOut(300); 
     $("div.fourth").delay(71070).show("puff", {},300).delay(42050).fadeOut(300); 
     $("div.fifth").delay(110080).show("puff", {},300).delay(17050).fadeOut(300); 
    }); 
</script> 

</body> 
</html>

Mathletics我嘗試了你的建議，但它完全打破了，任何想法我可能做錯了什麼？對不起，通過我有限的Jquery知識混淆了

腳本已更改，但仍無法使用？

<script> 
$("button").click(function() { 
    $("div.first").delay(200).show(300, "puff", function() { 
$(this).delay(116010).fadeOut(300); }); 
    $("div.first").delay(40230).show(300, "puff", function() { 
$(this).delay(28990).fadeOut(300); }); 
    $("div.first").delay(46180).show(300, "puff", function() { 
$(this).delay(27880).fadeOut(300); }); 
    $("div.first").delay(71070).show(300, "puff", function() { 
$(this).delay(42050).fadeOut(300); }); 
    $("div.first").delay(110080).show(300, "puff", function() { 
$(this).delay(17050).fadeOut(300); }); 
}); 
</script>

感謝veeTrain，幾乎除了工作，我需要他們在特定的時間進來，以及在特定的時間休假，這是我如何改變代碼，試圖做到這一點！在此先感謝，非常感謝！

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
div { position: absolute; width: 60px; height: 60px; float: left; display:none; } 
.first { background-color: #3f3; left: 0;} 
.second { background-color: #33f; left: 80px;} 
.third { background-color: #3f3; left: 120px;} 
.fourth { background-color: #33f; left: 300px;} 
.fifth { background-color: #3f3; left: 400;} 
</style> 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 
    <script src="http://ui.jquery.com/latest/ui/effects.core.js"></script> 
<script src="http://ui.jquery.com/latest/ui/effects.slide.js"></script> 
</head> 
<body> 

<p><button>Run</button></p> 
<div class="first"></div> 
<div class="second"></div> 
<div class="third"></div> 
<div class="fourth"></div> 
<div class="fifth"></div> 

<script> 
    $("button").click(function() { 
     console.log("hi"); 
     $("div.first").delay(15060).show(300); 
     $("div.second").delay(40230).show(300); 
     $("div.third").delay(46180).show(300); 
     $("div.fourth").delay(71070).show(300); 
     $("div.fifth").delay(110080).show(300); 
     setTimeout(function() { 
      $("div.first").fadeOut(300); 
     }, 116010); 
     setTimeout(function() { 
      $("div.second").fadeOut(300); 
     }, 28990); 
     setTimeout(function() { 
      $("div.third").fadeOut(300); 
     }, 27880); 
     setTimeout(function() { 
      $("div.fourth").fadeOut(300); 
     }, 42050); 
     setTimeout(function() { 
      $("div.fifth").fadeOut(300); 
     }, 17050); 
    }); 
</script> 
</body> 
</html>

來源

2012-04-17 Ben Vickers

他們淡入和永不褪色了呢？你測試過哪些瀏覽器？當它們淡入時，它們是否永遠不會淡出？ – JonH 2012-04-17 14:20:49

我不熟悉什麼.show（「puff」，{}，300）意味着什麼 - http://api.jquery.com/show/？ – jlarson 2012-04-17 14:23:52

這是在Chrome的最新版本，他們淡入，但從來沒有淡出......它的工作，直到我在延遲之前添加.show（「puff ... – 2012-04-17 16:07:54

你也可以執行，就像這樣的setTimeout操作：

$("div.first").delay(15060).show(300, "puff"); 
setTimeout(function() { 
    $("div.first").fadeOut(300); 
}, 116010);

這裏是展示一個例子的jsfiddle。（注意，不包括你的'粉撲'操作）

這個jsfiddle顯示你的時間可能是什麼。

如果我理解你的意圖，你會希望排列後的元素在第一次顯示後隱藏x秒。這些示例不會執行此操作，但您應該能夠自己進行計算，並在需要時通過爲初始延遲添加時間來精確隱藏元素。

例如爲：fade in after 5 seconds; fade out after 5 seconds

可能成爲fade in after 5 seconds and fade out after *10* seconds

來源

2012-04-17 14:37:28 veeTrain

嘿，它幾乎可以工作看到編輯我在底部，上面！ – 2012-04-17 18:18:52

哦，我應該說什麼沒有工作我是，第一個出現，然後不消失，接下來的那些進入正確的時間，但然後立即消失。 – 2012-04-17 18:20:23

@ BenVickers;關於他們的偉大的觀點瞬間消失。這是我在最後的點我的'答案';我更新它提到，你需要手動決定增加超時，無論第一次延遲顯示是什麼，即5秒延遲顯示和5秒延遲隱藏將b e延遲5，設置超時時間爲10.這可能不是理想的解決方案，但我認爲它可行。爲什麼你的超時時間如此_long_？最新迭代：http://jsfiddle.net/BfHr8/3/ – veeTrain 2012-04-17 19:07:23

你應該火fadeout的回調，像這樣：

$("div.first").delay(15060).show(300, "puff", function() { 
    $(this).delay(116010).fadeOut(300); 
    });

來源

2012-04-17 14:23:00 Mathletics

試過但破壞了它，我實現它錯了嗎？見上面。謝謝！ – 2012-04-17 16:11:20

jquery .fadeIn .delay .fadeOut - 不會消失

回答

相關問題