如果 $(element) hasClass 那么 .animate() 不起作用？

Question

当一个元素具有“activeSlide”类时，由于某种原因它无法按预期运行，我正在努力为箭头设置动画。我不确定这是为什么，任何人都可以提供一些关于我做错了什么的见解吗？

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

谢谢！

*更新*：以下是类在单击时更改，但动画不起作用的示例：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 存在的
• activeSlide 类是 #navitem-2 的子级
• #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

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

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

//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();

HTH，
查尔斯

Answer 3

您的代码可以正常工作，只需确保 #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>

如果代码需要对于比这更大的事件，我强烈建议您使用自定义事件，这样代码就不会重复，并且您可以尽可能少地关注每个代码块；动画在一处进行控制并在需要时触发。