Grow your CSS skills. Land your dream job.

jQuery: Animate only if class exists

  • # April 20, 2012 at 2:06 pm

    I would like to not go through the animation if the link already has the class of “active”, I have been fooling with this for a bit and can’t seem to get it to work, this is the current jQuery I am using

    // Scrolling Animation
    $('#slides li a').each(function()
    {
    $('#slides li a').click(function(e)
    {
    $('#social').fadeOut(100);

    var $anchor = $(this);
    $('html, body').stop().animate({
    scrollTop: $($anchor.attr('href')).offset().top
    }, 1500,'easeInOutExpo',function()
    {
    $('#social').fadeIn(250);
    });
    e.preventDefault();
    });
    });

    And here is the HTML

    # April 20, 2012 at 2:34 pm

    You would just need to wrap your click function in an if statement.

    if( !$(this).hasClass('active') ) {
    // click function
    }
    # April 20, 2012 at 2:42 pm

    Ya, I had tried that, it doesn’t work, it’s still doing the animation.

    # April 20, 2012 at 4:09 pm
    // Scrolling Animation
    $('#slides li a').each(function()
    {
    $('#slides li a').click(function(e)
    {
    if( !$(this).hasClass('active') ) {
    $('#social').fadeOut(100);

    var $anchor = $(this);
    $('html, body').stop().animate({
    scrollTop: $($anchor.attr('href')).offset().top
    }, 1500,'easeInOutExpo',function()
    {
    $('#social').fadeIn(250);
    });
    e.preventDefault();
    }
    });
    });

    What about that?

    # April 20, 2012 at 5:40 pm

    That worked, thanks!

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".