使用jQuery以特定的时间间隔显示和隐藏div，但停止最后一个div

问题描述

我需要一个代码是自动隐藏div 1并在特定时间显示div 2（我想我需要10秒或15秒），并且我已经查看了这篇文章：

如果你有两个以上的div，并且你想循环遍历它们，你可以这样做：

  var $ divs = $（div）。hide（），//在这里使用适当的选择器
 current = 0; 
 
 $ divs.eq（0）.show（）; //显示第一个
 
函数showNext（）{
 if（current< $ divs.length  -  1）{//如果不超过结尾，则
 $ divs。 （current）.delay（2000）.fadeOut（'fast'，function（）{
 current ++; 
 $ divs.eq（current）.fadeIn（'fast'）; 
 showNext （）; 
}）; 
} 
} 
 showNext（）; 
  

演示：

I need a code is auto hide div 1 and show div 2 in specific time (i guess i need 10sec or 15sec), and i have view this post :Show and hide divs at a specific time interval using jQuery

but it is repeat the same for every 10 seconds, i just need hide div 1 and show div 2, then just stop it forever. Anyone can help to edit the code?Thanks so much, i really need it badly, but my java is so poor :(

解决方案

Assuming that your divs have the ids "div1" and "div2", and that "div1" starts out visible and "div2" starts out hidden, then you can hide the first and show the second after x milliseconds like this:

$("#div1").delay(10000).hide(0, function() {
    $("#div2").show();
});

You can use .fadeOut() and .fadeIn() or other animation methods instead of .hide() and .show() if you like.

Put the above code inside a document ready handler if the intention is for this to happen automatically, or in a click handler or whatever if it is in response to something the user does.

Demo: http://jsfiddle.net/s7NXz/

If you have more than two divs and you want to cycle through them exactly once you can do something like this:

var $divs = $("div").hide(),    // use an appropriate selector here
    current = 0;

$divs.eq(0).show();             // show the first

function showNext() {
    if (current < $divs.length - 1) { // if not past the end then
        $divs.eq(current).delay(2000).fadeOut('fast', function() {
            current++;
            $divs.eq(current).fadeIn('fast');
            showNext();
        });
    }
}
showNext();

Demo: http://jsfiddle.net/s7NXz/1/

这篇关于使用jQuery以特定的时间间隔显示和隐藏div，但停止最后一个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！