How can I improve this JQuery code

Question

Hi,

I'm researching the optimising of JQuery code and was wondering if there is a way to better this code as it seems quite long...

$("#tabs-nav li a").hover(

     function(){
      if($(this).parent().hasClass('active')) {
      } else {
       $(this).stop().animate({ opacity: 1, marginTop: '24px'}, 200);
      }   
     },
     function(){
      if($(this).parent().hasClass('active')) {
      } else {
       $(this).stop().animate({ opacity: 0.4, marginTop: '29px'}, 200);
      }
     }
    );

Many thanks in advance!

Answer 1

$(".active #tabs-nav li a")...

Just use the selector to see if the parent is active and don't use the if statements. Though if ancestors of the parent are active it will select that also. So it depends on your case.

Answer 2

You can eliminate your conditionals by passing a filter to the parent function:

$('#tabs-nav li a').hover(function() {
    $(this).parent(':not(.active)').children('#tabs-nav li a').stop().animate({ opacity: 1, marginTop: '24px'}, 200);
}, function() {
    $(this).parent(':not(.active)').children('#tabs-nav li a').stop().animate({ opacity: 0.4, marginTop: '29px'}, 200);
});

If your <a> elements are immediate children of the <li> elements, you should use Josh's solution.

Answer 3

i just rewrite one, you'll get the idea:

 function(){
                if($(this).parent(':not(".active")')) {
                        $(this).stop().animate({ opacity: 1, marginTop: '24px'}, 200);
                }   
        }

Answer 4

$("#tabs-nav li:not(.active) a").hover(
    function(){
        $(this).stop().animate({ opacity: 1, marginTop: '24px'}, 200);
    },
    function(){
        $(this).stop().animate({ opacity: 0.4, marginTop: '29px'}, 200);
    }
);