Javascript 如何使用jQuery将div添加到数组中，然后使用循环和淡出方法_Javascript_Jquery_Html_Arrays_Loops

Javascript 如何使用jQuery将div添加到数组中，然后使用循环和淡出方法

javascript jquery html arrays loops

Javascript 如何使用jQuery将div添加到数组中，然后使用循环和淡出方法,javascript,jquery,html,arrays,loops,Javascript,Jquery,Html,Arrays,Loops,我正在尝试为一个生物页面创建类似于幻灯片的东西。我想将ID为（‘嗜好’、‘家乡’和‘欢迎’）的div存储在一个数组中，这样我就可以单击它们，并使它们一个接一个地消失，而不是一次全部消失。正如下面的代码所示，我创建了一个名为arr的数组，然后在一个单独的函数中使用一个循环使div元素淡出。任何帮助都将非常感谢这个初学者编码器 <body> <div class="aboutpage"> <img src="http://www.2020site

我正在尝试为一个生物页面创建类似于幻灯片的东西。我想将ID为（‘嗜好’、‘家乡’和‘欢迎’）的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>


怎么了！
$（文档）.ready（函数（）{
$var arr=[]；
$（“#slideshow div”）.each（function（）{arr.push（$（this））；}）；
}
)
$（“#幻灯片”）。单击（函数（）{
对于（i=0；i您是希望一次单击就淡出所有图像，还是希望淡出所单击的图像。如果您的要求是第二个，则可以使用此代码段
$("#slideshow div").click(function(){
   $(this).fadeOut();  //$(this) refers to div which is in current context
})

注意：不确定您在js中使用的$var
的确切含义
你想要这样的东西吗
$(document).ready(function(){
    $("#slideshow").click(function(){
        $("#slideshow div:visible").first().fadeOut();
    });    
});

这是一张具有不透明度和幻灯片效果的
幻灯片：
$("#slideshow div").click(function() {
  $(this).animate({"opacity": "0"}, 400, function() {
    $(this).animate({"height": "toggle"}, 400);
  });
})

默认情况下，JavaScript是非阻塞的。因此，即使您编写循环，所有动画都将立即启动。这是因为JavaScript是异步运行的。为了避免这种情况，您必须使用一点递归检查此
var divArray=[$（'homeplace'），$（'habiods'）；
函数递归（i）{
if（i）为什么需要将该div存储到数组中？您可以使用$（“#slideshow div”）.fadeOut（）什么是$var
？您已经定义了arr
，并且使用as$arr
所需的就是：$（“#slideshow div”）。单击（函数（）{$（this.fadeOut（）））；Fiddle here：您可以使用延迟功能，为淡出元素提供时间间隔，或在淡出方法中设置时间
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);