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

【问题标题】：If $(element) hasClass then .animate() not working?如果 $(element) hasClass 那么 .animate() 不起作用？
【发布时间】：2011-05-19 08:45:15
【问题描述】：

当一个元素具有“activeSlide”类时，我正在制作一个箭头动画，由于某种原因它没有按预期运行。我不确定这是为什么，谁能提供一些关于我做错了什么的见解？

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

谢谢！

*更新*：这是一个示例，其中类在点击时发生更改，但动画不起作用：http://jsfiddle.net/somewhereinsf/pn5sx/1/

【问题讨论】：

它在做什么？有错误吗？
你确定#navitem-2 有activeSlide 类吗？您可以发布一个指向一个实时示例的链接（或至少发布相关的 HTML）吗？
那个小绿div#navarro 应该先向左再向右摆动吗？然后它对我有用。我正在使用火狐。
嘿Sandeepan，它是。它在第一次加载时运行良好。动画停止后，单击另一个链接（其下方没有绿色框的链接）“activeSlide”类将变为您单击的链接。预期的行为是绿色框将移动到您单击的链接。不幸的是，在我的测试中并没有发生这种情况。
看我的回答。您的基本问题是您只在每次点击时运行动画代码 onload。

标签： jquery class conditional jquery-animate

【解决方案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;

您可以看到日志控制台中显示的内容。

【讨论】：

【解决方案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>

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

【讨论】：

同意。只是逐字使用@somewhereinsf 的 JavaScript。
感谢您的回答，我确实将#navarro 元素定位为绝对。当类切换（无论是点击还是定时）时，它无法动画。好消息是它可以为 onload 设置动画。有什么想法吗？jsfiddle.net/somewhereinsf/pn5sx/1

【解决方案3】：

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

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

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

【讨论】：