不知道我做错了什么，但这些 div 正确淡入但不淡出!
它们的目的是与 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>
数学我尝试了你的建议，但它完全破坏了它，你知道我可能做错了什么吗？抱歉，我对 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>
最佳答案
您应该将 fadeout 作为回调触发，如下所示:
$("div.first").delay(15060).show(300, "puff", function() {
$(this).delay(116010).fadeOut(300);
});
关于java - jquery .fadeIn .delay .fadeOut - 不淡出，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10193028/