1

私のナビゲーションリンク画像で機能する次のホバースクリプトがあります。

$("nav a").hover(
    function() {
        $(".current", this).animate({
            opacity: 1
        }, {
            duration: 300,
            specialEasing: {
                opacity: 'linear',
            },
});
    }, function() {
        $(".current", this).animate({
            opacity: 0
        }, {
            duration: 2000,
            specialEasing: {
                opacity: 'linear',
            },

});
});

I am wondering there is a way of intercepting the animation if the user moves the cursor out of the hover div and then back into it before the original animation has finished. If the user moves the cursor back into the div I would want the animation to fade the opacity of the image in the .current div to 1 immediately.

I hope this is clear, and would be glad of any help.

Thanks,

Nick

4

2 に答える 2

2

アニメーションをキャンセルするには、jQuery のstop()関数(info)を使用できます。enter 関数の最初の行を次のように変更します。

    $(".current", this).stop().animate({

これによりアニメーションが停止し、すぐに不透明度が 1 に戻ります。

于 2011-10-22T16:51:16.850 に答える
0

過去に私がこのようなことを達成した方法は、ホバーされた要素への参照をオブジェクトに格納することであり、ホバーされた要素に関連付けられた何らかの ID によってキーオフされます。

例えば：

var hoveredElements = {previousId:null};
$("nav a").bind("mouseover mouseout",function(e) {
           if(e.type == "mouseover")
           {

              if(!hoveredElements.hasOwnProperty(this.id))
              {
                 hoveredElements[this.id] =  $(".current", this).animate({opacity:  1},300);
                 hoveredElements.previousId = this.id;
              }
              else if(hoveredElements.previousId == this.id)
              {
                if(hoveredElements.hasOwnProperty(this.id))
                {
                    hoveredElements[this.id].stop().css({opacity:1});
                } 
                else
                {
                  hoveredElements[this.id] = $(".current", this).css({opacity:1});
                }
              }
           }
           else
           {
             if(hoveredElements.hasOwnProperty(this.id))
             {
                 hoveredElements[this.id].animate({opacity:  0},2000,function(){
                    delete hoveredElements[this.id];
                 });
             }
           }
});

もちろん、ID は HTML ID である必要はありません。一意の識別子 (要素自体である可能性があります) だけです。

編集：申し訳ありませんが、元の質問がよくわかりませんでした!

于 2011-10-22T17:03:45.063 に答える