0

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

大変助かりました！:)

4

4 に答える 4

0

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 });
    });
});
于 2013-05-27T11:05:30.613 に答える
0

そのような方法はありませんonmouseout

試す

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

フィドル

于 2013-05-27T11:05:54.177 に答える