如果$（element）hasClass則.animate（）不起作用？

當一個元素有一個「activeSlide」類出於某種原因沒有按預期運行時，我正在動畫一個箭頭動畫。我不知道爲什麼這是，任何人都可以提供一些洞察到什麼即時通訊做錯了？

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

謝謝！

* 更新 *：這裏就是類的onclick改變examaple，但動畫不起作用：http://jsfiddle.net/somewhereinsf/pn5sx/1/

來源

2010-12-02 somewhereinsf

它在幹什麼？有沒有錯誤？ – hunter 2010-12-02 20:01:07

你確定`＃navitem-2`有`activeSlide`類嗎？你能發佈一個鏈接到一個活的例子（或者至少發佈相關的HTML）嗎？ – clarkf 2010-12-02 20:02:38

是那個小綠色`div＃navarro`應該擺動到左邊然後右邊？那麼它爲我工作。我正在使用Firefox。 – 2010-12-02 21:04:00

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

這應該100％的條件下

#navitem-2存在
類activeSlide是0的小孩
#navarro存在。

，如果你有一個控制檯，如谷歌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;

，你可以看到什麼樣的顯現在日誌控制檯中。

來源

2010-12-02 20:11:24 RobertPitt

您的代碼有效，只要確保#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>

如果所需的代碼是任何比這個我強烈建議您使用自定義事件，這樣的代碼不重複，你可以保持每個代碼塊集中在儘可能少的大;動畫被控制在一個地方，並在需要時觸發。

來源

2010-12-02 20:14:44

您只在加載時運行一次動畫...您需要在每次點擊時運行它們。

下面是使用您發佈的代碼的簡單示例。

//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，
查爾斯

來源

2010-12-02 21:41:06 Charlino

如果$（element）hasClass則.animate（）不起作用？

回答

相關問題