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

Question

我需要代码在特定时间后自动隐藏div1和显示，比如 10 秒或 15 秒。 我读了这篇文章： Show and hide divs at a specific time interval using jQuery，div2

但它每 10 秒重复一次。我只需要隐藏div1和显示div2一次。

Answer 1

假设您的 div 具有 id"div1"和"div2“，并且"div1"开始可见并"div2"开始隐藏，那么您可以隐藏第一个并在x毫秒后显示第二个，如下所示：

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

如果您愿意，可以使用.fadeOut()and.fadeIn()或其他动画方法代替.hide()and 。.show()

如果目的是自动发生，则将上述代码放入文档就绪处理程序中，或者放入单击处理程序中，或者如果它是为了响应用户所做的事情。

演示：http: //jsfiddle.net/s7NXz/

如果您有两个以上的 div，并且您想在它们之间循环一次，您可以执行以下操作：

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();

演示：http: //jsfiddle.net/s7NXz/1/

Answer 2

首先div1是可见的并且div2是隐藏的。要在特定时间后显示div2和隐藏，您可以添加一个通用类：div1x

 $('.x').delay(1000).toggle();

您可以调整延迟和切换速度。Toggle 将显示匹配的隐藏元素并隐藏匹配的显示元素。
请参阅jQuery 切换文档

Answer 3

$('html').addClass('js');

$(function() {

  var timer = setTimeout( showDiv, 5000);

  var counter = 0;

  function showDiv() {
    if (counter ==0) { counter++; return; }

    $('div','#container')
      .stop()
      .hide()
      .filter( function() { return this.id.match('div' + counter); })   
      .show('fast');
    counter == 3? counter = 0 : counter++; 

  }

});

使用 setTimeout 代替 setInterval

Answer 4

$("button").click(function(){
  $("p").hide(1000);
  alert("The paragraph is now hidden");
});