タグ付けされた質問 「jquery-animate」

マウスオーバーでjQueryを使用してbackgroundColorの変化をアニメーション化しようとしています。 私はいくつかの例をチェックしましたが、それは正しいようです。fontSizeのような他のプロパティで動作しますが、backgroundColorを使用すると、「無効なプロパティ」のjsエラーが発生します。私が使用している要素はdivです。 $(".usercontent").mouseover(function() { $(this).animate({ backgroundColor: "olive" }, "slow"); }); 何か案は？

327 javascript  jquery  colors  jquery-animate 

私はjQueryとjQuery-uiを使用しており、さまざまなオブジェクトのさまざまな属性をアニメーション化したいと考えています。 ここで問題を説明するために、ユーザーがマウスを重ねると青から赤に変わる1つのdivに簡略化しました。 を使用するときに必要な動作を取得できますがanimate()、その場合、アニメーション化するスタイルはアニメーションコード内にある必要があり、スタイルシートとは別のものにする必要があります。（見る例1を） 別の方法を使用addClass()しremoveClass()ていますが、で取得できる正確な動作を再現できませんでしたanimate()。（例2を参照）） 例1 私が持っているコードを見てみましょうanimate()： $('#someDiv') .mouseover(function(){ $(this).stop().animate( {backgroundColor:'blue'}, {duration:500}); }) .mouseout(function(){ $(this).stop().animate( {backgroundColor:'red'}, {duration:500}); }); それは私が探しているすべての行動を表示します： 赤と青の間をスムーズにアニメーション化します。 ユーザーがマウスをdivの内外にすばやく移動しても、アニメーションは「オーバーキュー」しません。 アニメーションの再生中にユーザーがマウスを出し入れすると、現在の「途中」状態と新しい「目標」状態の間で正しく緩和されます。 ただし、スタイルの変更はで定義されanimate()ているので、そこでスタイル値を変更する必要があり、スタイルシートをポイントすることはできません。スタイルが定義されている場所のこの「断片化」は、本当に私を悩ませるものです。 例2 addClass()and を使用した私の現在の最善の試みはremoveClass次のとおりです（アニメーションを機能させるには、jQuery-uiが必要です）。 //assume classes 'red' and 'blue' are defined $('#someDiv') .addClass('blue') .mouseover(function(){ $(this).stop(true,false).removeAttr('style').addClass('red', {duration:500}); }) .mouseout(function(){ $(this).stop(true,false).removeAttr('style').removeClass('red', {duration:500}); }); これは、元の要件のプロパティ1と2の両方を示していますが、3は機能しません。 私はこれの理由を理解しています： アニメーション化するときaddClass()、removeClass()jQueryは一時的なスタイルを要素に追加し、提供されたクラスの値に達するまで適切な値をインクリメントします。その後、実際にクラスを追加/削除します。 このため、スタイル属性を削除する必要があります。そうしないと、アニメーションが途中で停止した場合、スタイル属性が残り、タグのスタイル属性がクラススタイルよりも重要であるため、クラス値が永久に上書きされます。 ただし、アニメーションの途中で新しいクラスが追加されていないため、このソリューションでは、アニメーションが完了する前にユーザーがマウスを動かすと、色が前の色にジャンプします。 私が理想的に望んでいるのは、次のようなことができるようになることです。 $('#someDiv') .mouseover(function(){ …

226 javascript  jquery  css  jquery-ui  jquery-animate 

<div>from 200pxからautoheight までアニメートしたい。私はそれを動作させることができないようです。誰か知っていますか？ これがコードです： $("div:first").click(function(){ $("#first").animate({ height: "auto" }, 1000 ); });

171 javascript  jquery  html  css  jquery-animate 

ボタンをクリックすると、ページが一番上にスクロールするように設定します。しかし、最初にifステートメントを使用して、ページの上部が0に設定されていないかどうかを確認しました。次に、0でない場合は、ページをアニメーション化して上部にスクロールします。 var body = $("body"); var top = body.scrollTop() // Get position of the body if(top!=0) { body.animate({scrollTop:0}, '500'); } トリッキーな部分は、ページが一番上までスクロールした後で何かをアニメーション化することです。だから私の次の考えは、ページの位置が何であるかを調べます。そこで、コンソールログを使用して調べました。 console.log(top); // the result was 365 これは私に365の結果を与えました、それは私が一番上にスクロールする直前にあった位置番号だと思います。 私の質問は、ページが0になったときに実行される別のアニメーションを追加できるように、位置を0に設定する方法です。 ありがとう！

171 jquery  jquery-animate  scrolltop 

ページの読み込み時にスクロールを特定のIDにアニメーション化するためのタイミング。私はたくさんの研究をして、これに出くわしました： $("html, body").animate({ scrollTop: $('#title1').height() }, 1000); しかし、これはIDから始まり、ページの上部にアニメーション表示されるようです。 HTML（ページの下半分）は簡単です： <h2 id="title1">Title here</h2>

123 jquery  scroll  jquery-animate 

クロスブラウザ互換のローテーション（ie9 +）の作成に取り組んでおり、jsfiddleに次のコードがあります $(document).ready(function () { DoRotate(30); AnimateRotate(30); }); function DoRotate(d) { $("#MyDiv1").css({ '-moz-transform':'rotate('+d+'deg)', '-webkit-transform':'rotate('+d+'deg)', '-o-transform':'rotate('+d+'deg)', '-ms-transform':'rotate('+d+'deg)', 'transform': 'rotate('+d+'deg)' }); } function AnimateRotate(d) { $("#MyDiv2").animate({ '-moz-transform':'rotate('+d+'deg)', '-webkit-transform':'rotate('+d+'deg)', '-o-transform':'rotate('+d+'deg)', '-ms-transform':'rotate('+d+'deg)', 'transform':'rotate('+d+'deg)' }, 1000); } CSSとHTMLは本当にシンプルで、デモ用です。 .SomeDiv{ width:50px; height:50px; margin:50px 50px; background-color: red;} <div id="MyDiv1" class="SomeDiv">test</div> <div id="MyDiv2" class="SomeDiv">test</div> 回転は使用.css()時に機能し.animate()ますが、使用時には機能しません。それはなぜですか、それを修正する方法はありますか？ ありがとう。

81 jquery  css  rotation  jquery-animate