Question

我需要一个代码是自动隐藏div 1并在特定时间显示div 2（我想我需要10秒或15秒），我已查看此帖子： Show and hide divs at a specific time interval using jQuery

但每10秒重复一次，我只需要隐藏div 1并显示div 2，然后永远停止它。任何人都可以帮助编辑代码？非常感谢，我真的非常需要它，但我的java非常糟糕:(

Answer 1

假设你的div有{id "div1"和"div2“，"div1"开始显示，"div2"开始隐藏，那么你可以隐藏第一个和在 x 毫秒之后显示第二个像这样：

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

如果您愿意，可以使用.fadeOut()和.fadeIn()或其他动画方法代替.hide()和.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

$('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 3

现在div1可见，div2被隐藏。你想在特定时间后显示div2并隐藏div1。

添加一个公共类'x'。

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

您可以调整延迟和切换速度。切换将显示匹配的隐藏元素并隐藏匹配的显示元素。 http://api.jquery.com/toggle/

Answer 4

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

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

4 个答案: