jQuery .hasClass method to omit effect

Question

I've created a simple background effect for some tabs on a page but don't want that effect to fire if the tab has the class 'current'.

I presume there is a way to do this using .hasClass

Here's what I'm using for the effect:

$('ul.htabs a').mouseover(function(){

 $(this).stop().animate(
  {backgroundPosition:"(0 -810px)"}, 
  {duration:150},
  {easing: 'easeOutCubic'})
 }).mouseout(function(){
 $(this).stop().animate(
  {backgroundPosition:"(0 -806px)"}, 
  {duration:150},
  {easing: 'easeInCubic'})
 });

Answer 1

.mouseover(function(e) {

if ( $(this).hasClass('lol') ) {
  return;
}

if the element has a class of lol kill the function by returning immediately.

Answer 2

Use the :not() selector:

$('ul.htabs:not(.current) a').mouseover(function(){
    // ... your code here
});

Now, if the class current is added or removed dynamically (Thanks Matt!) to the <a> tag, this will produce confusing results, as when the mouseover event is bound that list of elements is static. If you are also applying the class current on the fly, then use live() to bind the event, so that you only ever get anchors that at that moment have the current class applied:

$('ul.htabs:not(.current) a').live('mouseover', function(){
    // ... your code here
});

Answer 3

You could also put it in the selector:

$('ul.htabs:not(.current) a').mouseover(function(){ ... });