Question

我有一个链接，我使用Javascript来动画更改文本。我想要创建的行为如下

1）用户将鼠标悬停在文本上，不同的文字会淡入 2）当用户移开光标时，文本恢复正常。

我已经设法通过查看另一个代码来创建文本的更改，但是我在制作它时遇到了麻烦，以便当光标离开链接时，文本会变回来。

你可以看看这里的jsfiddle - ＆gt;

我收到错误

Uncaught TypeError: Object [object Object] has no method 'onmouseout'

这是html - ＆gt;

          <a href="#" id="stepan_says">
            <span>The way you get what you want out of life is...</span>
          </a>

这是JS - ＆gt;

$("#stepan_says").hover(function(){
    $(this).find("span").animate({opacity:0},function(){
        $(this).text("I have no idea! But here's the philosophy!")
            .animate({opacity:1});  
    })
    $(this).onmouseout(function(){
        $(this).find("span").animate({opacity:0},function(){
            $(this).text("This is the third text!")
                .animate({opacity:1});  
        })
    });
});

非常感谢！ :)

Answer 1

使用hover而不是mouseleave的回调函数。你不需要另一个活动。悬停的回调将完全符合您的要求。

       $("#stepan_says").hover(function(){
            $(this).find("span").animate({opacity:0},function(){
                $(this).text("I have no idea! But here's the philosophy!")
                    .animate({opacity:1});  
            })                              
        },function(){
          $(this).find("span").animate({opacity:0},function(){
                    $(this).text("This is the third text!")
                        .animate({opacity:1});  
                })
        });

demo

Answer 2

jQuery中没有onmouseout，这是一个原生事件，请尝试：

$(this).on('mouseout', function(){
   // do stuff
});

但是，hover()已经有了mouseenter和mouseleave的回调，所以请使用：

$("#stepan_says").hover(function () {
    $(this).find("span").animate({ opacity: 0 }, function () {
         $(this).text("I have no idea! But here's the philosophy!")
                .animate({ opacity: 1 });
    });
},function () {
    $(this).find("span").animate({ opacity: 0 }, function () {
         $(this).text("This is the third text!")
                .animate({ opacity: 1 });
    });
});

Answer 3

没有这样的方法onmouseout

尝试

$(this).mouseleave(function(){
        $(this).find("span").animate({opacity:0},function(){
            $(this).text("This is the third text!")
                .animate({opacity:1});  
        })
    });

FIDDLE

Answer 4

由于您正在使用悬停，您可以继续使用

$("#stepan_says").hover(function(){
    $(this).find("span").stop().animate({opacity:0},function(){ 
        $(this).text("I have no idea! But here's the philosophy!").animate({opacity:1});  
    });
}, function(){
    $(this).find("span").stop().animate({opacity:0},function(){ 
        $(this).text("This is the third text!").animate({opacity:1});  
    });
});

结构是

$("selector").hover(function(){ // on mouse over 

}, function(){ // on mouse out

});

onmouseout在交换文本时出错

4 个答案: