$（要素）がhasClassの場合、.animate（）は機能しませんか？

Question

要素が何らかの理由で "activeSlide"のクラスを持っているときに矢印をアニメートすると、期待どおりに機能しません。私が間違っていることに誰かが少し洞察力を提供することができますか？

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

ありがとうございます！ここではクラスがonclickの変更examapleがあるが、アニメーションは機能しません：* 更新 *

これは、条件の下で100％動作するはずhttp://jsfiddle.net/somewhereinsf/pn5sx/1/

Answer 1

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

• #navitem-2が存在する
• クラスactiveSlideは0の子です
• #navarroが存在します。

あなたは、このようなGoogleのCHROM開発者ツールとしてコンソールを持っている場合は、あなたのJavaScriptでいくつかのログメカニズム

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

そして試す追加することができます。

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

を、あなたが表示されていますかを見ることができますログコンソールに表示されます。

Answer 2

コードが正常に動作するように、#navarrowがmarginLeftと同じようにレイアウトされていることを確認してください。つまり、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> 

デモ：あなたのコメント/例に基づいて更新http://jsfiddle.net/cameronjordan/uwf9y/

：クラスの変更や確認は、この例では、任意の目的にサービスを提供していないよう

それが生きて使用することをはるかに簡単ですアニメーションを直接トリガーします。

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> 

コードは、私は非常にそのコードが繰り返されていない、あなたはできるだけ少ないに焦点を当て、各コードチャンクを保つことができるようにカスタムイベントを使用することをお勧めこれよりも大きくなるために必要な場合。アニメーションは1か所で制御され、必要に応じてトリガーされます。

Answer 3

アニメーションをロードするときには1回だけ実行しています...クリックごとにアニメーションを実行する必要があります。

投稿したコードを使用した簡単な例です。

//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、
チャールズ