2

我有几个DIV,想一一展示。

首先,它们都应该display:none;在 CSS 中,然后我需要一些jQuery脚本,我不知道如何编写。

一次只能看到一个元素,延迟应该在 2 秒左右。顺序是:

  1. 2 秒内无元素
  2. 第一个元素可见 2 秒。
  3. 2 秒内无可见元素
  4. 第二个元素可见可见 2 秒
  5. 等等... +循环

谢谢!

这是我到目前为止所做的事情的链接。我知道,这不是一种优雅的方式。此外,它不会在最后一个元素打开后循环停止。 http://jsbin.com/uwubah/7/

HTML:

  <div class="dezute">dezute</div>
  <div class="kubikas">kubikas</div>
  <div class="zirkles">zirkles</div>
  <div class="telefonas">telefonas</div>
  <div class="izoliacija">izoliacija</div>
  <div class="dainuoja">dainuoja</div>

CSS:

.dezute, .kubikas, .zirkles, .telefonas, .izoliacija, .dainuoja{
  display: none;
}

问:

$(document).ready(function() { 
    setTimeout(function() { 
        $('.dezute').fadeIn(); 
 }, 2000); 
});

$(document).ready(function() { 
    setTimeout(function() { 
        $('.dezute').fadeOut();
        $('.kubikas').fadeIn();
 }, 4000); 
});

$(document).ready(function() { 
    setTimeout(function() { 
        $('.dezute').fadeOut();
        $('.kubikas').fadeOut();
        $('.zirkles').fadeIn();
 }, 6000); 
});

$(document).ready(function() { 
    setTimeout(function() { 
        $('.dezute').fadeOut();
        $('.kubikas').fadeOut();
        $('.zirkles').fadeOut();
        $('.telefonas').fadeIn();
 }, 8000); 
});

$(document).ready(function() { 
    setTimeout(function() { 
        $('.dezute').fadeOut();
        $('.kubikas').fadeOut();
        $('.zirkles').fadeOut();
        $('.telefonas').fadeOut();
        $('.izoliacija').fadeIn();
 }, 10000); 
});

$(document).ready(function() { 
    setTimeout(function() { 
        $('.dezute').fadeOut();
        $('.kubikas').fadeOut();
        $('.zirkles').fadeOut();
        $('.telefonas').fadeOut();
        $('.izoliacija').fadeOut();
        $('.dainuoja').fadeIn();
 }, 12000); 
});
4

0 回答 0