如何使用jQuery向数组中添加div，然后使用循环和fadeOut方法
如何使用jQuery向数组中添加div，然后使用循环和fadeOut方法
提问于 2016-01-11 05:36:33
我正在尝试创建类似于幻灯片的生物页面。我想用I(“业余爱好”、“家地”和“欢迎”)将div存储在一个数组中，这样我就可以点击它们，让它们一个接一个地消失，而不是一下子消失。如下面的代码所示，我创建了一个名为arr的数组，然后在一个单独的函数中使用一个循环来使div元素淡出。任何帮助将非常感谢这个初学者编码器。
<body>
<div class="aboutpage">
<img src="http://www.2020site.org/trees/images/MatureWalnut.jpg">
<div id="slideshow">
<div id="homeplace">
<img src="http://www.2020site.org/trees/images/MatureWalnut.jpg">
</div>
<div id="hobbies" >
<img src="http://www.allaboutbirds.org/guide/PHOTO/LARGE/red_winged_blackbird_glamour.jpg">
</div>
<div id="welcome">
<h1>What's up!</h1>
</div>
</div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$var arr=[];
$("#slideshow div").each(function(){ arr.push($(this));});
}
)
$("#slideshow").click(function(){
for (i=0; i<arr.length; i++){
$arr[i].fadeOut();
}
});
</script>回答 4
Stack Overflow用户
回答已采纳
发布于 2016-01-11 06:07:04
这具有opacity和slide效应：
$("#slideshow div").click(function() {
$(this).animate({"opacity": "0"}, 400, function() {
$(this).animate({"height": "toggle"}, 400);
});
})Stack Overflow用户
发布于 2016-01-11 05:54:10
你想要这样的东西吗？
$(document).ready(function(){
$("#slideshow").click(function(){
$("#slideshow div:visible").first().fadeOut();
});
});这是小提琴
Stack Overflow用户
发布于 2016-01-11 06:08:08
默认情况下，JavaScript是非阻塞的.所以即使你写了一个循环，所有的动画都会同时启动。这是因为JavaScript异步运行。为了解决这个问题，您必须使用一些递归检查这个小提琴。
var divArray = [$('#homeplace'), $('#hobbies')];
function recurse(i) {
if(i <= divArray.length) {
setTimeout(function() {
divArray[i].animate({
opacity: 0
}, 2000);
i++;
recurse(i);
}, 2000);
}
}
recurse(0);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/34714811
复制相关文章
相似问题
腾讯云开发者
