2013-04-23 3 views
0

J'ai un petit problème avec une animation de fondu que j'assemble.
Il fonctionne correctement deux fois par le biais de l'animation, et comprend une enveloppe qui fonctionne correctement.jQuery Fade - Rupture après la deuxième itération

Sur la deuxième page, elle se fixe sur la première photo et non sur la première photo.
J'ai regardé un peu les retards, mais avec le bon fonctionnement la première fois, je ne suis pas sûr de savoir où aller à partir d'ici.

Quelqu'un pourrait-il nous aider?
Merci à tous.

Lien vers jsFiddle: http://jsfiddle.net/REbuy/1/

Exemples de code comme suit

jQuery:

var speed = 2000; 
function switcher(){ 
$('.next').animate({opacity:1}, speed, 'linear', function() 
    { 
     $('.current').removeClass('current'); 
     $(this).addClass('current'); 
     $('.next+li').addClass('next'); 
     $(this).removeClass('next'); 
     $('.next').css('opacity',0); 
     checker(); 
    }); 
} 

function checker(){ 
     if($('.w-slides li:last').hasClass('current')) 
     { 
      $('.w-slides li:first').addClass('next'); 
     } 
     else if($('.w-slides li:first').hasClass('next') && $('.w-slides li:last').hasClass('current')) 
     { 

      $('.w-slides li:first').addClass('current');   
      $('.w-slides li.current+li').addClass('next'); 
      $('.w-slides li:first').removeClass('next'); 
     } 
    switcher(); 
    } 
switcher(); 

HTML:

<div> 
    <div class="w-fader"> 
     <ul class="w-slides"> 
      <li class="current"><img src="fader-img-1.png" /></li> 
      <li class="next"><img src="fader-img-2.png" /></li> 
      <li><img src="fader-img-3.png" /></li>  
     </ul> 
    </div> 
</div> 

Répondre

1

Votre problème est lorsque vous enveloppez, vous ne Réglez l'opacité du premier élément à zéro.

j'ai changé votre fonction checker à ceci:

function checker(){ 
if($('.w-slides li:last').hasClass('current')) 
    { 
     $('.w-slides li:first').addClass('next').css('opacity',0); 
    } 
} 

Et il semble work

Je suppose encore, vous pouvez simplement passer votre appel à checker à avant la ligne de commutation où vous définissez la opacité.

+0

Merci Matt. Une erreur simple quand je la regarde, mais firebug me semble un peu bizarre lors de la mise à jour de toutes les valeurs en temps réel. – Joe