悬停在动画文本上后,文本淡入淡出不会返回

Text fade not returning after hovering over animated text

本文关键字:文本 淡出 返回 淡入 动画 悬停      更新时间:2023-09-26

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

问题是,一旦徽标悬停在上面,文本渐变就不会生成下一阶段的文本,即使徽标不再悬停在上面也不会回来。

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

这个代码是

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

为了解决这个问题,我在第二个函数中复制了头表面程序,比如这个

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

有没有一种更优雅的方法可以做到这一点,而不是重复头程序?

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

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

试着去掉它,看看会发生什么。