javascript - 如何使用 jQuery 将 div 添加到数组,然后使用循环和 fadeOut 方法

标签 javascript jquery html arrays loops

我正在尝试为生物页面创建类似于幻灯片的内容。我想将带有 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>

最佳答案

这具有不透明度滑动 效果:

$("#slideshow div").click(function() {
  $(this).animate({"opacity": "0"}, 400, function() {
    $(this).animate({"height": "toggle"}, 400);
  });
})

Here is the JSFiddle demo

关于javascript - 如何使用 jQuery 将 div 添加到数组,然后使用循环和 fadeOut 方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34714811/

相关文章:

javascript - 在 webdriver js 中使用Session

javascript - 多个 View 中出现 Backbone.js 验证错误

html - href ="###"在 anchor 标签中有什么用?

javascript - head标签中的document.write是否需要等待window.onload?

java - HTML 表单提交双 URL 编码从 %20 到 %2520

javascript - div标签滚动到底部

javascript - 如何使用 PHP 和 JS 将文本复制到剪贴板?

javascript - 如何可靠地发布在单个隐藏字段中设置的多个值

javascript - 在特定时间内运行一个函数

jquery - 有人可以解释一下 Google Image Swirl 中可见的效果吗?