0

私はこの例を持っています：

例

ボタンをクリックすると、赤いテキストが左にスライドしますが、問題は、アニメーションが終了したときに黄色のテキストが新しい位置にジャンプすることです. 赤いテキストがスライドアウトしている間に、黄色いテキストをリアルタイムで新しい位置に移動するためにどのように「アニメーション化」できますか?

HTML:

<div id="1" style="float:left; color:blue">
    <a>THIS IS NUMBER 1</a>
</div>

<div id="2" style="float:left; color:red">
    <a>THIS IS NUMBER 2</a>
</div>

<div id="3" style="float:left; color:yellow">
    <a>THIS IS NUMBER 3</a>
</div>

<br/>
<button id="btn">GO!</button>

JS:

$("#btn").click(function()
{
   $("#2").hide("slide", { direction: "left" }, 700);
});
4

1 に答える 1

1

jQueryがその上の要素を削除しているため、黄色のテキストがジャンプし、それに応じてページが調整されます。あなたはそれをよりスムーズにするためにこのようなことを試みることができます：

$("#btn").click(function()
{
   $("#2").hide("slide", { direction: "left" }, 700);
   $("#3").slideUp('slow', function() {
    // add anything else you want to do here for when this animation completes.
    // if not, just use .slideUp('slow');
  });
});

これはテストされておらず、頭のてっぺんから外れていますが、あなたを近づけるはずです、

または、.animate（）メソッドを使用してみてください。

$("#btn").click(function()
{
    $('#2').animate({"width": "toggle", "height":"toggle", "opacity": "toggle" }, "slow");
});

例： http： //jsfiddle.net/YG5rh/2/

于 2013-02-21T20:11:10.710 に答える