If $(element) hasClass then .animate() not working?

Question

Im working on animating an arrow when an element has a class of "activeSlide" for some reason it is not functioning as expected. Im not sure why this is, can anyone provide a little insight in to what im doing wrong?

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

Thanks!

*Update*: Here is an examaple where the classes change onclick, but the animation does not function: http://jsfiddle.net/somewhereinsf/pn5sx/1/

Are you sure that `#navitem-2` has the `activeSlide` class? Can you post a link to a live example (or at least post the associated HTML)? — clarkf, Dec 02 '10 at 20:02
is that small green `div#navarro` supposed to swing to left and then right? then it is working for me. I am using firefox. — Sandeepan Nath, Dec 02 '10 at 21:04
Hey Sandeepan, it is. It functions fine on the first load. After the animation stops, click on another link (one that does not have the green box under it) the "activeSlide" class will change to the link you click. The expected behavior is that the green box will move to the link you click. Unfortunately, in my testing it does not happen that way. — somewhereinsf, Dec 02 '10 at 21:33
See my answer. Your basic problem is that you're only running the animation code onload NOT on each click. — Charlino, Dec 02 '10 at 21:42

RobertPitt · Answer 1 · 2010-12-02T20:37:21.910

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

This should work 100% under the conditions

#navitem-2 exists
class activeSlide is a child of #navitem-2
#navarro exists.

if you have a console such as Google Chrom Developer Tools you can add some logging mechanism in your javascript

$.fn.log = function()
{
    if(LoggingEnabled && console && console.log)
    {
        console.log(this);
    }
    return this;
}

And then try:

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

and you can see what's appearing in the log console.

Cameron Jordan · Answer 2 · 2010-12-02T21:55:46.240

Your code works, just make sure #navarrow is laid out in a way that marginLeft will matter, i.e. 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>

Demo: http://jsfiddle.net/cameronjordan/uwf9y/

Updated based on your comment/example:

The class change and checking does not seem to be serving any purpose in this example it is much more straightforward to use live events and trigger the animation directly.

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>

If the code needed to be any bigger than this I highly encourage you to use custom events so that code is not repeated and you can keep each code chunk focused on as little as possible; the animation is controlled in one place and triggered wherever needed.

Thanks for the answer, I am indeed positioning the #navarro element absolute. When the class switches (wether it be on click or timed) it fails to animate. The good news is that it animates onload. Any ideas?http://jsfiddle.net/somewhereinsf/pn5sx/1/ — somewhereinsf, Dec 02 '10 at 20:43

score 0 · Answer 3 · answered Dec 02 '10 at 21:41

You're only running the animations once on load... you need to run them on each click.

Here's quick example using the code you posted.

//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,
Charles

If $(element) hasClass then .animate() not working?

3 Answers3

Linked