Forums

mikes02

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

<nav id="slides">
	<ul>
        <li id="slide-1"><a href="#top" title="Return to Top" class="top active">Return to Top</a></li>
        <li id="slide-2"><a href="#portfolio-section" title="Work Samples" class="portfolio-section">Work Samples</a></li>
        <li id="slide-3"><a href="#approach-wrap" title="Our Approach" class="approach-wrap">Our Approach</a></li>
        <li id="slide-4"><a href="#contact-wrap" title="Drop Us a Line" class="contact-wrap">Drop Us a Line</a></li>
    </ul>
</nav>

TheDoc

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

if( !$(this).hasClass('active') ) {
    // click function
}

mikes02

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

TheDoc

// 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?

mikes02

That worked, thanks!

treehouse : what would you like to learn today?

Forums

[Solved] jQuery: Animate only if class exists