1. 技术文章
  2. How to show each div, one by one on jquery?

How to show each div, one by one on jquery?

由 孤人 提交于 2019-11-30 09:28:17
Tatu Ulmanen

You could use something like this:

$(function() {
    // Start showing the divs
    showDiv();
});

function showDiv() {
    // If there are hidden divs left
    if($('div:hidden').length) {
        // Fade the first of them in
        $('div:hidden:first').fadeIn();
        // And wait one second before fading in the next one
        setTimeout(showDiv, 1000);
    }
}

That find the next hidden div and fade it in every second. Just hide the divs you want to show using CSS's display: none; beforehand.

If you for some weird reason have to use the each function, this might work.. kinda.

$(function() {
    $('div:hidden').each(function(index) {
        setTimeout(function(el) {
            el.fadeIn();
        }, index * 1000, $(this));
    });
});

Or you can use this plugin: https://github.com/Devlart/Jquery-AnimateOnebyOne

Try the next code:

$('div').hide().each(function(index, domElement) {
      $(this).slideDown("slow");
      // Wait for the end of the animation somehow...
    })
标签
jquery
effects
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!