您的代码有效,只要确保#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>
如果所需的代码是任何比这个我强烈建议您使用自定义事件,这样的代码不重复,你可以保持每个代码块集中在尽可能少的大;动画被控制在一个地方,并在需要时触发。
它在干什么?有没有错误? – 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