Нужна лучшая структура в скрипте jQuery

Question

У меня есть чрезвычайно простая анимационная программа jQuery, которая будет влиять на видимость некоторых вкладок, уложенных поверх друг друга. В функциональности нет никаких жалоб, но структура моего кода ужасающая. Мои коды повторяют одну и ту же функцию снова и снова, но я не могу написать функцию, которая может выполнять задачу совершенно одинаково. Я хочу включить низкую степень инкапсуляции, если это возможно, потому что я хотел бы иметь возможность использовать это в примере. Ниже приведен код.

$(window).scroll(function(){ 
        if($(window).scrollTop()>450){ 
         last.slideDown(700, function(){ 
         third.slideDown(700, function(){ 
         second.slideDown(700, function(){ 
         first.slideDown(700); 
         })})}) 
        } 
        else{ 
         bars.slideUp(1000); 
        } 
       }); 


       first.mouseenter(function(){ //when first elements hovered over 
        second.animate({opacity : ".4"},{ duration:500, queue:false}); 
        third.animate({opacity : ".4"},{ duration:500, queue:false}); 
        last.animate({opacity : ".4"},{ duration:500, queue:false}); 

        first.mouseleave(function(){ 
         second.animate({opacity : "1"},{duartion:50, queue:false}); 
         third.animate({opacity : "1"},{duartion:50, queue:false}); 
         last.animate({opacity : "1"},{duartion:50, queue:false}); 

        }) 
       })   
       second.mouseenter(function(){ //when second elements hovered over 
        second.css("z-index", "5"); 
        first.animate({opacity : ".4"},{ duration:500, queue:false}); 
        third.animate({opacity : ".4"},{ duration:500, queue:false}); 
        last.animate({opacity : ".4"},{ duration:500, queue:false}); 

        second.mouseleave(function(){ 
         second.css("z-index", "3"); 
         first.animate({opacity : "1"},{duartion:50, queue:false}); 
         third.animate({opacity : "1"},{duartion:50, queue:false}); 
         last.animate({opacity : "1"},{duartion:50, queue:false}); 

        }) 
       }) 
        third.mouseenter(function(){ //second element hover 
        third.css("z-index", "4"); 
        first.animate({opacity : ".4"},{ duration:500, queue:false}); 
        second.animate({opacity : ".4"},{ duration:500, queue:false}); 
        last.animate({opacity : ".4"},{ duration:500, queue:false}); 

        third.mouseleave(function(){ //third element hover 
         third.css("z-index", "2"); 
         first.animate({opacity : "1"},{duartion:50, queue:false}); 
         second.animate({opacity : "1"},{duartion:50, queue:false}); 
         last.animate({opacity : "1"},{duartion:50, queue:false});     
        }) 
       }) 
       last.mouseenter(function(){  //last element hover 
        last.css("z-index", "4"); 
        first.animate({opacity : ".4"},{ duration:500, queue:false}); 
        third.animate({opacity : ".4"},{ duration:500, queue:false}); 
        second.animate({opacity : ".4"},{ duration:500, queue:false}); 

        last.mouseleave(function(){ 
         last.css("z-index", "1"); 
         first.animate({opacity : "1"},{duartion:50, queue:false}); 
         third.animate({opacity : "1"},{duartion:50, queue:false}); 
         second.animate({opacity : "1"},{duartion:50, queue:false});      
        }) 
       }) 
      }); 

Answer 1

почему ты не поставил первый, второй, третий и последний переменной в массиве и перебирать массив вместо того, чтобы использовать настоящее имя? Образец, который вы написали, подходит, если вы поместите свою переменную в массив и используете элементы этого массива.