CODEWITHSUNDEEP
jqueryclassconditional-statementsjquery-animate
somewhereinsf
somewhereinsf

Reputation: 21

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

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/

Upvotes: 1

Views: 6341

Answers (3)

Cameron Jordan
Cameron Jordan

Reputation: 759

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.

Upvotes: 0

ten5peed
ten5peed

Reputation: 15890

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

Upvotes: 0

RobertPitt
RobertPitt

Reputation: 57268

$(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.

Upvotes: 1

Related Questions