0

ページの読み込み時に、3 つの div を右から左にアニメーション化しようとしています。

私のHTMLはこのようなものです -

<div id="Div1"></div>
<div id="Div2"></div>
<div id="Div3"></div>

jQuery .animate を使用して試してみましたが、100% 理解できませんでした。私の問題は、右から左にアニメーション化する方法ですか?

これは私のjQueryです -

var left = $('#Div1').offset().left;
var left = $('#Div2').offset().left;
var left = $('#Div3').offset().left;

$("#Div1").css({left:left}).animate({
    width: "200px",
    height: "200px",
    left: 0
  }, {
    duration: 3000,
    specialEasing: {
      width: "linear",
      height: "easeOutBounce"
    },
    complete: function() {
    }
  });

$("#Div2").css({left:left}).animate({
    width: "200px",
    height: "200px",
    left: 0
  }, {
    duration: 3000,
    specialEasing: {
      width: "linear",
      height: "easeOutBounce"
    },
    complete: function() {

    }
  });

$("#Div3").css({left:left}).animate({
    width: "200px",
    height: "200px",
    left: 0
  }, {
    duration: 3000,
    specialEasing: {
      width: "linear",
      height: "easeOutBounce"
    },
    complete: function() {

    }
  });

これはJSFIDDLEです

4

1 に答える 1

5

css ルールに andposition: absolute;をright: -150px追加して削除する#Div1, #Div2, #Div3float: left

http://jsfiddle.net/XqqtN/3446/

ここに別のフィドルがあります。margin-left値を変更して、例示した 1 に近づけます: http://jsfiddle.net/XqqtN/3448/

また、easingeffects の場合は、jQuery uieasing効果をleftand またはright値に追加するだけです。これは値に対するeaseOutBackUI効果でありleft、この効果の見栄えを良くするために持続時間を少し速くするように変更しました: http://jsfiddle.net/XqqtN/3449/

必要な正確なルック アンド フィールを得るために、さまざまな効果と持続時間の速度をテストすることをお勧めします。すべての jQuery UI 効果は次の場所にリストされています: http://api.jqueryui.com/easings/

ページがロードされた後、アニメーションを表示するために 1 ～ 2 秒の遅延を追加することもできます。その場合は、アニメーション コード ( ) が実行さ.delay(1000)れる前に、必要な数のミリ秒を追加するだけです。.animate()これは、Web ページでスライド アニメーションを正確に表示するのにも役立ちます。

わかりましたので、これで遊ぶのはこれが最後です。とにかくひどいと思うので、高さの緩和効果を削除しました: http://jsfiddle.net/XqqtN/3451/

繰り返しますが、思い通りにするには、それをいじる必要があります。これがあなたの質問に答えている場合は、回答としてマークしてください。

編集

今日はもっと楽しんで、あなたが提供した例のURLのようにページの中央に配置され、それに応じて幅のコンテンツに合わせてサイズが変更されるように機能しました（これがうまく機能するために、画像は512x512ピクセルです）、ヘッドショット画像をサークルに配置しました。うまくいけば、これがまさにあなたが今求めているものです: http://jsfiddle.net/tT8pj/1/および同じ正確なコードのフルスクリーン結果: http://jsfiddle.net/tT8pj/ 1/埋め込み/結果/

したがって、画面のサイズに関係なく、サイズが完全に変更され、中央に留まっていることがわかります。これがあなたの質問に答えたら、答えとしてマークしてください! ただし、これであなたの質問に答えていない場合、どうなるかわかりません。

乾杯 ：）

于 2013-08-12T05:43:19.893 に答える