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元素提取调用次数

请注意，它比其他解决方案更干净，速度更快。除非经过测试，否则我认为这是一段有效的代码。

由于您使用# 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
            });
        });
    }
);

Answer 2

在其他功能之外，您可以这样做：

function showHeader(el) {
    $(el).css("display", "none");
    $('#headerText').find("h1#takemeback").css("display", "block");
    $('#headerText').find("h1#takemeback").animate({opacity:1,});
}

然后，在您的悬停功能中，将其命名为：

showHeader(this);

除了上面的变量建议，你可以链接你的陈述：

$('#headerText').find("h1#takemeback").css("display", "block").animate({opacity:1,});

此外，#takemeback应该是唯一的，所以这样做：

$("#takemeback").css("display", "block").animate({opacity:1,});

避免在jQuery中重复代码

2 个答案: