Как я могу улучшить этот код JQuery

Question

Я изучаю оптимизацию кода JQuery, и мне было интересно, есть ли способ улучшить этот код, поскольку он кажется довольно длинным ...

$("#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);
            }
        }
    );

Большое спасибо заранее!

Answer 1

$("#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);
    }
);

Answer 2

Вы можете устранить ваши условные выражения, передав фильтр в функцию parent:

$('#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);
});

Если ваши элементы <a> являются непосредственными потомками элементов <li>, вам следует использовать решение Джоша.

Answer 3

Я просто переписать один, вы получите идею:

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

Answer 4

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

Просто используйте селектор, чтобы увидеть, активен ли родитель, и не используйте операторы if. Хотя, если предки родителя активны, он тоже это выберет. Так что это зависит от вашего случая.