Question

当元素具有“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存在
班级activeSlide是#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

您的代码有效，只需确保#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>

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

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

HTHS，
查尔斯

如果$（element）hasClass那么.animate（）不工作？

3 个答案: