Javascript 将鼠标悬停在动画文本上后，文本淡入淡出不返回

在我们的网站上，我们有一个徽标标题文本，旁边有其他文本，这些文本将定期淡出并更改文本

问题是，一旦徽标悬停在文本上方，淡入淡出将不会生成下一阶段的文本，即使徽标不再悬停在上方，也不会返回

如何阻止文本消失而不返回

代码是

 //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,});
               });
           }
       );

为了解决这个问题，我在第二个函数中复制了headerfader，如下所示

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
            });

       });
   }

---

有没有更优雅的方法来代替重复headerfader？

您的动画函数中似乎有一个尾随逗号

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

---

尝试删除它，看看会发生什么。

运行时是否出现错误？您好，没有错误。淡出文本刚刚消失扫描你创建了一个简单的例子吗？我已经做了，似乎没有任何问题。您不应该在ID之前使用

h1

，因为ID应该是唯一的。请发布您的html。我添加了$（'headerFader'）.carousel（{interval:2500，pause:false}）；对于第二个函数，是否有更优雅的处理方法？对于两个悬停函数，我注意到动画函数的持续时间为0，如果您不关心过渡，为什么不干脆在hove上设置样式？类似这样：$（'#headerText'）。悬停（函数（）{$（this.find（“h1#masterHeader”）.css（“display”，“none”）；$（this.find（“h1#takemeback”）.css（“display”，“none”）；}，function（）{$（this.find（“h1#masterHeader”）.css（“display”，“none”）；$（this.find（“h1#takemeback”）.css（“display”，“none”）；）；与其使用

.css（）

来显示/隐藏，您只需使用

.hide（）

和

.show（）

这是我从其他人那里继承的代码，这只是我一直在研究的一个bug。我将尝试一下上面的建议。