如果$（element）hasClass然后.animate（）不工作？

我正在制作一个箭头动画，当一个元素有一个“activeSlide”类由于某种原因它没有按预期运行。 我不知道为什么会这样，任何人都可以提供一些有关我做错什么的见解？

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

谢谢！

* 更新 * ：以下是类更改onclick的一个例子，但动画不起作用： http ： //jsfiddle.net/somewhereinsf/pn5sx/1/

Answer 1

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

这应该在条件下100％工作

• #navitem-2存在
• class activeSlide是#navitem-2的子#navitem-2
• #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; 

你可以看到日志控制台中出现了什么。

Answer 2

您只在加载时运行动画…您需要在每次单击时运行它们。

这是使用您发布的代码的快速示例。

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

Answer 3

你的代码有效，只需确保#navarrow以marginLeft重要的方式布局，即position:absolute 。

演示： http ： //jsfiddle.net/cameronjordan/uwf9y/

根据您的评论/示例更新：

在这个例子中，类更改和检查似乎没有任何用途，使用直播事件和直接触发动画要简单得多。

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

 
Slide 1
 
Slide 2
 
Slide 3
 
  

如果代码需要大于此值，我强烈建议您使用自定义事件，以便不重复代码，并且可以尽可能少地保持每个代码块的重点; 动画在一个地方被控制并在需要的地方触发。