jquery: функция fadeIn () и out в IE работают по-разному - PullRequest
1 голос
/ 30 января 2012

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

ЦЕЛЬ: После того, как все div .bannerloop анимированы, отобразите div .bannerlast *. 1010*

Прекрасно работает во всех браузерах, кроме IE - сначала исчезает div, а затем останавливается.

Ответы [ 2 ]

0 голосов
/ 31 января 2012

Произошла ошибка кодирования.

if (index = spanscnt - 1) {должно быть if (index = divscnt - 1) {

0 голосов
/ 30 января 2012

Попробуйте это 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();

Не большой поклонник функции delay () jQuery, но я пытался воспроизвести то, что у вас было.Прекрасно работает во всех современных браузерах.

...