javascript - onmouseout 在交换文本时出错

Question

我有一个链接，我在其中使用 Javascript 为文本更改设置动画。我想创建的行为如下

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

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

您可以在这里查看 jsfiddle -->

http://jsfiddle.net/3WMyQ/

我得到错误

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

这是html -->

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

这是 JS -->

$("#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});  
                })
        });

演示

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

小提琴

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

});