Question

HTML

  <div class="banner">
    <div style="font-size:35px;" class="bannerloop none">slogan 1</div>
    <div style="font-size:35px;" class="bannerloop none">slogan 2</div>
    <div style="font-size:35px;" class="bannerloop none">slogan 3</div>
    <div style="font-size:35px;" class="bannerlast none">last</div>
  </div>

CSS

.none {
    display: none;
}

JS

  var divs = $('.banner').children('.bannerloop');
  var divscnt = divs.length;
  $(divs).delay(2000).each(function(index) {
    $(this).delay(3000*index).fadeIn(1500).fadeOut(1500, function() {
      if (index = spanscnt - 1) {
        $('.bannerlast').delay(3000*index).fadeIn(1500);
      }
    });
  });

目标：毕竟.bannerloop div是动画的，显示.bannerlast div。

除了IE之外的所有浏览器都可以正常工作 - 它会淡出第一个div然后停止。

Answer 1

试试 jsFiddle 。

var index = 0;

function fadeMe()
{
    $('div.banner div.bannerloop:eq('+index+')').delay(3000*index).fadeIn(1500).fadeOut(1500,function(){
        index++;
        if(index < $('div.banner div.bannerloop').length) {
            fadeMe();
        }
        else {
            $('div.banner div.bannerlast').delay(3000*index).fadeIn(1500);
        }
    });
}

fadeMe();

不是jQuery延迟（）函数的忠实粉丝，但我试图复制你所拥有的东西。适用于所有当前浏览器。

Answer 2

发生编码错误。

if（index = spanscnt - 1）{should if if（index = divscnt - 1）{

jquery：fadeIn（）和out函数在IE中的工作方式不同

2 个答案: