4

理由はわかりませんが、ホバー「アウト」関数の animate() は、ホバー「イン」関数で設定するのでは0なく、値から開始するようです。16

  $.fx.step.textShadowBlur = function(fx) {
    $(fx.elem).css({textShadow: '0 0 ' + Math.floor(fx.now) + 'px #000'});
  };

  $('a').hover(function(){
    $(this).stop().animate({textShadowBlur:16}, {duration: 400});
  }, function(){
    $(this).stop().animate({textShadowBlur:0}, {duration: 900});
  });

そのため、マウスアウト時にテキストの影が突然変化し、アニメーションは表示されません

私は何を間違っていますか？

jsfiddle

わかりました、私はそれを修正しました。ステップ関数の定義か何かでjqueryのバグのようです。とにかくこれはうまくいきます：

  $('a').hover(function(){
    $(this).stop().animate({nothing:16}, {duration: 400, step: function(now, fx){
       $(this).css({textShadow: '0 0 ' + Math.floor(fx.now) + 'px #000'});
     }});
  }, function(){
    $(this).stop().animate({nothing:0}, {duration: 900, step: function(now, fx){
       $(this).css({textShadow: '0 0 ' + Math.floor(fx.now) + 'px #000'});
     }});
  });
4

2 に答える 2

2

構文が無効です。hover現在、マウスオーバー機能の後にイベントを閉じています。

試す：

$('a').hover(
    function(){     
        $(this).stop().animate({textShadowBlur:16}, {duration: 400});     
    }, 
    function(){     
        $(this).stop().animate({textShadowBlur:0}, {duration: 900});   
});
于 2011-08-10T18:09:20.687 に答える
2

構文の問題のように見えます

$('a').hover(function() {
    $(this).stop().animate({textShadowBlur: 16}, {duration: 400});
    // remove the extra }});
}, function() {
    $(this).stop().animate({textShadowBlur: 0}, {duration: 900});
});

編集

すでに回避策を見つけているようですが、css 3 トランジションでこの効果を行うオプションは次のとおりです。

フィドル

a {
    font-size:40px;
    text-shadow:0 0 0 #000;
    -webkit-transition:text-shadow .9s linear;
}
a:hover {
    text-shadow:0 0 16px #000;
    -webkit-transition:text-shadow .4s linear;
}
于 2011-08-10T18:09:32.637 に答える