CODEWITHSUNDEEP
javascriptjqueryanimation
dvlden
dvlden

Reputation: 2462

jQuery animate all except one class

I was wondering how could we do this... Got nothing on my mind...

So my question Title might be confusing so here's full question. How can we run our animation but skip animation of one class that contain .current...

This is menu animation so I don't want to animate current class as there's no point.

I was able to stop it by adding another class in CSS and using !important for height. This way it looks like there's no animation but if I inspect elements, of course there is...

JS Code:

$("#topMenu li").mouseover(function(){
    $(this).find('span').stop().animate({ height:'45px' }, { queue:false, duration:600, easing: 'easeOutBounce' });
});

$("#topMenu li").mouseout(function(){
    $(this).find('span').stop().animate({ height:'0px' }, { queue:false, duration:600, easing: 'easeOutBounce' });
});

var currentPage = $('#topMenu span').hasClass('current');

if(currentPage === true) {
    $('span.current').css('display', 'block');
}

So I am able to do this to look like there's no animation... But can we do it somehow so there's really no animation for the element that contain .current class in it ?

Upvotes: 0

Views: 623

Answers (2)

nickf
nickf

Reputation: 546253

You could add :not in the selector:

$('#topMenu li:not(.current)').mouseover(...)

If the class is being added dynamically after the event handlers have been added, move the check to be inside the handler:

$('#topMenu li').mouseover(function () {
  if ($(this).hasClass('current')) return;
  // etc
});

Upvotes: 1

Explosion Pills
Explosion Pills

Reputation: 191779

$(this).find('span:not(.current)').stop().animate...

Upvotes: 3

Related Questions