0

animationCSS3のアニメーションより遅いので使わないようにしています。

メソッドを使用しても、直接 CSS3 アニメーションを使用cssするよりも高速ですが、遅いのではないかと思っていました。animationtransform3d

$(this).animate({'opacity' : 'show', 'top' : topPosition+'px'});

対

$(this).css('top', topPosition+'px');

ご覧のとおりtransform3d、動的に生成される位置パラメーターが必要なため、css3 を直接使用することはできません。

CSS

#flashMessage{  
    position: relative;
    transition: all 1.4s ease-in-out;
    -webkit-transition: all 1.4s ease-in-out; /** Chrome & Safari **/
    -moz-transition: all 1.4s ease-in-out; /** Firefox **/
    -o-transition: all 1.4s ease-in-out; /** Opera **/
}
4

2 に答える 2

2

jquery アニメーションは jquery css とは異なります。最初は時間のセット中に elm をアニメーション化しますが、もう 1 つはアニメーション化せずに css プロパティを即座に適用します。

css tansition の方が高速かもしれませんが、すべてのブラウザーでサポートされているわけではありません。

アニメーション コードに構文エラーがある場合は、次のようにする必要があります。

$(this).animate({'opacity' : 1, 'top' : topPosition+'px'}); //+'px' is not required it would work with/without it.

アニメーションをすべてのブラウザーで動作させたい場合は animate を使用します。それ以外の場合は、主要なブラウザーで動作させたい場合は css トランジションのみを使用することをお勧めしますが、jquery の柔軟性は得られません。

于 2013-03-28T16:05:01.227 に答える
0

可能な場合は CSS アニメーションを使用しますが、jquery を使用してアニメーション クラスを追加および削除する傾向があるため、必要なときにアニメーションを開始し、必要なときに停止します。

両方を一緒に使用すると便利です。

もちろん、CSS アニメーションを使用する場合は、どのブラウザーがそれを処理するかを考える必要があります。

http://api.jquery.com/addClass/

于 2013-03-28T16:29:47.860 に答える