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

为什么不在数组中放入第一个，第二个，第三个和最后一个变量并迭代数组而不是使用真实名称？如果将变量放在数组中并使用这些数组的元素，那么您编写的模式就适合。

在jQuery脚本中需要更好的结构

1 个答案: