Si $ (element) hasClass alors .animate() ne fonctionne pas?

Question

Im travaillant sur l'animation d'une flèche lorsqu'un élément a une classe de "activeSlide" pour une raison quelconque, il ne fonctionne pas comme prévu. Je ne sais pas pourquoi c'est, quelqu'un peut-il donner un petit aperçu de ce que je fais mal?

$(document).ready(function() { 
if($('#navitem-2').hasClass("activeSlide")){ 
    $("#navarro").animate({marginLeft:"220px"}, 500); 
}; 
}); 

Merci!

* Mise à jour *: Voici un examaple où les classes changent onclick, mais l'animation ne fonctionne pas: http://jsfiddle.net/somewhereinsf/pn5sx/1/

Answer 1

$(document).ready(function() 
{ 
    if($('#navitem-2 .activeSlide').length > 0) 
    { 
     $("#navarro").animate({marginLeft:"220px"}, 500); 
    } 
} 

Cela devrait fonctionner à 100% dans les conditions

• #navitem-2 existe
• classe activeSlide est un enfant de #navitem-2
• #navarro existe.

si vous avez une console telle que les outils de développement Google Chrom vous pouvez ajouter un mécanisme de journalisation dans votre javascript

$.fn.log = function() 
{ 
    if(LoggingEnabled && console && console.log) 
    { 
     console.log(this); 
    } 
    return this; 
} 

Et puis essayez:

LoggingEnabled = true; 
$(document).ready(function() 
{ 
    var Check = $('#navitem-2 .activeSlide').log(); 
    if(Check.length > 0) 
    { 
     $("#navarro").log().animate({marginLeft:"220px"}, 500); 
    } 
} 
LoggingEnabled = false; 

et vous pouvez voir ce qui apparaît dans la console de journal.

Answer 2

Votre code fonctionne, assurez-vous simplement que #navarrow est agencé de manière à ce que marginLeft soit important, c'est-à-dire position:absolute.

<div id="navitem-2" class="activeSlide"></div> 
<div id="navarro" 
    style="width:10px;height:10px;background-color:green;position:absolute;"> 
</div> 
<script> 
    $(document).ready(function() { 
     if($('#navitem-2').hasClass("activeSlide")){ 
       $("#navarro").animate({marginLeft:"220px"}, 500); 
     }; 
    }); 
</script> 

Démo: http://jsfiddle.net/cameronjordan/uwf9y/

Mise à jour en fonction de votre commentaire/exemple:

Le changement de classe et le contrôle ne semble pas être au service des fins dans cet exemple, il est beaucoup plus simple à utiliser en direct événements et déclencher l'animation directement.

http://jsfiddle.net/cameronjordan/pn5sx/3/

<div id="navitem-1" class="slideable"><a href="#">Slide 1</a></div> 
<div id="navitem-2" class="slideable"><a href="#">Slide 2</a></div> 
<div id="navitem-3" class="slideable"><a href="#">Slide 3</a></div> 
<div id="navarro"></div> 

<script> 
var prevSlideable; 
$('.slideable').live('click', function(){ 
    if(prevSlideable != this.id) { 
     // do you need this activeSlide class anymore? 
     if(prevSlideable) { 
      $(prevSlideable).removeClass('activeSlide'); 
     } 
     $(this).addClass('activeSlide'); 

     prevSlideable = this.id; 
     $('#navarro').animate({ 
      marginLeft: this.offsetLeft + "px" 
     }, 500); 
    } 
}); 
</script> 

Si le code nécessaire pour être plus grand que cela, je vous encourage fortement à utiliser des événements personnalisés afin que le code ne se répète pas et vous pouvez garder chaque morceau de code axé sur le moins possible; l'animation est contrôlée à un endroit et déclenchée partout où cela est nécessaire.

Answer 3

Vous exécutez uniquement les animations une fois en charge ... vous devez les exécuter à chaque clic.

Voici un exemple rapide utilisant le code que vous avez publié.

//Add/Remove Class based on click - in my project this is done automatically (using malsup's Cycle) 
$("#navitem-1 a").click(function(i) { 
    $("div").removeClass('activeSlide'); 
    $("#navitem-1").addClass('activeSlide'); 
    SlideGreenDot(); 
}); 
$("#navitem-2 a").click(function(i) { 
    $("div").removeClass('activeSlide'); 
    $("#navitem-2").addClass('activeSlide'); 
    SlideGreenDot(); 
}); 
$("#navitem-3 a").click(function(i) { 
    $("div").removeClass('activeSlide'); 
    $("#navitem-3").addClass('activeSlide'); 
    SlideGreenDot(); 
}); 

//Conditional Animate Functions 
function SlideGreenDot() { 
    if ($('#navitem-1').hasClass("activeSlide")) { 
     $("#navarro").animate({ 
      marginLeft: "0px" 
     }, 500); 
    }; 
    if ($('#navitem-2').hasClass("activeSlide")) { 
     $("#navarro").animate({ 
      marginLeft: "190px" 
     }, 500); 
    }; 
    if ($('#navitem-3').hasClass("activeSlide")) { 
     $("#navarro").animate({ 
      marginLeft: "340px" 
     }, 500); 
    }; 
} 

//Run the method to start 
SlideGreenDot(); 

HTHS,
Charles