javascript - 避免在 jQuery 中重复代码

Question

我目前有以下代码。

让 #headerfader 在第二个函数运行后恢复运行(再次悬停以重置淡入淡出的文本)

我在函数中复制了代码。

有没有更优雅的处理方式？

//FADER TEXT
        $('#headerFader').carousel({
            interval: 2500,
            pause: false
        });

        //BACK HOME TEXT
       $('#headerText').hover(
           function(){
               $(this).find("h1#masterHeader").animate({opacity:0}, 0, function(){
                   $(this).css("display", "none");
                   $('#headerText').find("h1#takemeback").css("display", "block");
                   $('#headerText').find("h1#takemeback").animate({opacity:1,});
               });
           },
           function(){
               $(this).find("h1#takemeback").animate({opacity:0}, 0, function(){
                   $(this).css("display", "none");
                   $('#headerText').find("h1#masterHeader").css("display", "block");
                   $('#headerText').find("h1#masterHeader").animate({opacity:1,});
                   //FADER TEXT
                    $('#headerFader').carousel({
                        interval: 2500,
                        pause: false
                    });

               });
           }
       );

Answer 1

这是针对此问题的复杂解决方案，它最大限度地减少了 jQuery 元素获取调用的次数

Note that it's clean and a lot faster than the other solutions provided. Unless it's tested I believe that this is a working piece of code.

由于您使用的是 # div id 选择器(它是唯一的)，因此无需调用 find() 函数。

//Object handles
var headerFader  = $('#headerFader');
var masterHeader = $('#masterHeader');
var takemeback   = $('#takemeback');

headerFader.carousel({
    interval: 2500,
    pause: false
});

//BACK HOME TEXT
headerFader.hover(
    function(){
        masterHeader.animate({opacity:0}, 0, function(){
            $(this).css("display", "none");
            takemeback.css("display", "block").animate({opacity:1}, 1000);
        });
    },
    function(){
        takemeback.animate({opacity:0}, 0, function(){
            $(this).css("display", "none");
            masterHeader.css("display", "block").animate({opacity:1}, 1000);
            headerFader.carousel({
                interval: 2500,
                pause: false
            });
        });
    }
);