76

jQueryでbox-shadowプロパティをアニメーション化するための正しい構文はどれですか？

$().animate({?:"0 0 5px #666"});
4

5 に答える 5

80

正解

メソッドを拡張するEdwinMartinのシャドウアニメーション用のjQueryプラグインを.animate使用すると、「boxShadow」とそのすべてのファセット（色、xオフセットとyオフセット、ぼかし半径、広がり半径）で通常の構文を使用できます。アニメーション化されます。複数のシャドウのサポートが含まれています。

$(element).animate({ 
  boxShadow: "0px 0px 5px 3px hsla(100, 70%, 60%, 0.8)"
});

代わりにCSSアニメーションを使用する

jQueryはstyle、DOM要素のプロパティを変更することでアニメーション化します。これにより、特定性に驚きが生じ、スタイル情報がスタイルシートから移動する可能性があります。

CSSシャドウアニメーションのブラウザサポート統計が見つかりませんが、アニメーションを直接処理する代わりに、jQueryを使用してアニメーションベースのクラスを適用することを検討してください。たとえば、スタイルシートでボックスシャドウアニメーションを定義できます。

@keyframes shadowPulse {
    0% {
        box-shadow: 0px 0px 10px 0px hsla(0, 0%, 0%, 1);
    }

    100% {
        box-shadow: 0px 0px 5px 0px hsla(0, 0%, 0%, 0);
    }
}

.shadow-pulse {
    animation-name: shadowPulse;
    animation-duration: 1.5s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
}

次に、ネイティブanimationendイベントを使用して、アニメーションの終了をJSコードで実行していたことと同期させることができます。

$(element).addClass('shadow-pulse');
$(element).on('animationend', function(){    
    $(element).removeClass('shadow-pulse');
    // do something else...
});
于 2012-02-08T16:07:51.173 に答える
30

jQuery 1.4.3+を使用している場合は、追加されたcssHooksコードを利用できます。

boxShadowフックを使用する：https ：//github.com/brandonaaron/jquery-cssHooks/blob/master/boxshadow.js

あなたはこのようなことをすることができます：

$('#box').animate({
    'boxShadowX': '10px',
    'boxShadowY':'10px',
    'boxShadowBlur': '20px'
});

フックではまだ色をアニメートできませんが、追加できる作業があると確信しています。

例： http： //jsfiddle.net/petersendidit/w5aAn/

于 2010-11-09T12:11:45.523 に答える
15

プラグインを使用したくない場合は、CSSを少し使用して行うことができます。

#my-div{    
  background-color: gray;
  animation: shadowThrob 0.9s infinite;
  animation-direction: alternate;
  -webkit-animation: shadowThrob 0.9s ease-out infinite;
  -webkit-animation-direction: alternate;
}
@keyframes shadowThrob {
  from {box-shadow: 0 0 30px 10px rgba(190,65,12, 0.9);}
  to {box-shadow: 0 0 30px 10px rgba(190,65,12, 0.2);}
}
@-webkit-keyframes shadowThrob {
  from {box-shadow: 0 0 30px 10px rgba(190,65,12, 0.9);}
  to {box-shadow: 0 0 30px 10px rgba(190,65,12, 0.2);}
}
/*NOTE: The animation property is not supported in Internet Explorer 9 and earlier versions.*/

それをチェックしてください：http：//jsfiddle.net/Z8E5U/

CSSアニメーションに関する完全なドキュメントが必要な場合は、ウィザードへの道はここから始まります。

于 2014-02-21T06:13:44.380 に答える
4

ShaneSauceソリューションが大好きです！IDの代わりにクラスを使用すると、jQuery addClass / delay / removeClassを使用して、任意の要素に効果を追加/削除できます。

$('.error').each( function(idx, el){
    $( el )
        .addClass( 'highlight' )
        .delay( 2000 )
        .removeClass( 'highlight' );
});
于 2015-04-17T16:07:23.437 に答える
0

プラグインなしでそれを行う方法の例を次に示します。jQueryアニメーションボックス しかし、プラグインの使用に伴う追加機能はありませんが、私は個人的に狂気の背後にある方法を見て（そして理解して）好きです。

于 2012-05-08T12:26:00.480 に答える