gpt4 book ai didi

javascript - 使用 HTML/JQuery/CSS 依次显示 DIV

转载 作者:行者123 更新时间:2023-11-30 13:01:35 25 4
gpt4 key购买 nike

现场演示:Live Demo

HTML:

   <div class="target">
<img src="bg-clock.png" alt="jQuery" />
</div>
<div class="target2">
<img src="bg-clock.png" alt="jQuery" />
</div>

CSS:

.target, .target2 {
display: none;
}

JQuery:

  $(document).ready(function() {
$(".target").show( "drop",
{direction: "down"}, 1000 );
$(".target2").show( "drop",
{direction: "down"}, 1000 );

});

现在两个 DIV 同时出现,但我希望 target2target1 完成动画之后出现,对于任何其他 DIV 等等。

最佳答案

使用第一个动画函数的 complete 回调:这样 target2 仅在 target1 的动画完成后才进行动画处理。

  $(document).ready(function () {
$(".target").show("drop", {
direction: "down",
complete: function () {
$(".target2").show("drop", {
direction: "down"
}, 1000);

}
}, 1000);

});

Fiddle

.show()

对于一系列目标,您可以这样做:

只需为您的目标提供一个名为 slideIn 的通用类名,以便使用单个选择器收集它们。您还可以在选择器中使用多个类名或属性以选择器开头

  var elems = $('.slideIn').get(); // get all the targets to an array.

function animate() {
var elem = elems.shift(); //remove the top element from the array

$(elem).show("drop", { //animate it
direction: "down",
complete: function () {
if(elems.length > 0)
window.setTimeout(animate); //use recursive callback
}
}, 1000);
}

animate(); //invoke for the first time.

Fiddle

关于javascript - 使用 HTML/JQuery/CSS 依次显示 DIV,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17282008/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com