1

jQueryを使用して、要素を初期位置から数ピクセル横にスライドさせるとはどういう意味ですか？animate（）関数があることは知っていますが、その使用方法がわかりません。ヒント、チュートリアルをいただければ幸いです。

編集：

現在、マウスオーバーで要素の背景色を変更しようとしています（最終的には背景画像も交換したいのですが、今のところはそうではありません...）

現在、次のコードを使用しています。どうしたの？（.linkは、一連の要素を参照するクラスです）

  //light up links on  mouseover
  $(".link").mouseover(function(event){           
    $(this).animate({'color' : '#000099'}, "fast");
  });

  //dim link on mouseout
  $(".link").mouseout(function(event){       
    $(this).animate({'color' : '#efefef'}, "fast");                
  });
4

4 に答える 4

3

まず、のドキュメントをお読みくださいanimate。

次に、CSSまたはjQueryに、またはCSSまたはjQueryを介してposition属性を設定するために、移動しようとしている要素を定義する必要があります。relativeabsolute

に設定するとrelative、移動するピクセル数を指定できます。

// Will move #element right 10 pixels in 500 milliseconds
$('#element').animate({
    left: 10px
}, 500);

絶対位置を選択した場合は、最初にを使用して要素の開始位置を計算し.offset().left、それに必要なピクセル数を追加してから、その位置にアニメーション化する必要があります。例えば：

// Will move #element right 10 pixels in 500 milliseconds
$('#element').animate({
    left: $('#element').offset().left + 10
}, 500);

これは、＃elementの親要素が静的に配置されている場合に機能します（そうでない場合、offset（）。leftは絶対左値と一致しません）。

于 2009-12-20T20:52:25.390 に答える
1

カラー アニメーションの場合は、jQuery カラープラグインを使用する必要があります。

animate()jQuery Color プラグインをインポートすると、色をアニメーション化するために使用できます。

于 2009-12-21T00:52:35.853 に答える
0

位置アニメーションについて考えるときは、CSSで遊んでいるだけであることを覚えておく必要があります。したがって、少し左にスライドしたい場合は、左側の余白を調整する必要があります（または、既存のスタイルとレイアウトによっては、右側にパディングを追加する可能性があります）。

例えば：

$("#myElement").click(function(){
  $(".block").animate({"left": "-=50px"}, "slow");
});

このサイトには、基本的なアニメーションに関するいくつかの有用なコンテンツがあり、もちろん実際のjQueryドキュメントがあります。

于 2009-12-20T20:53:02.660 に答える
0

私は本当にこのサイトが大好きです。jQuery についての素晴らしいリソースです。

デザイナーのためのjQuery

于 2009-12-20T20:56:38.687 に答える