javascript - Jquery Slide Effect At The Same Time as the div is next

Question

我有这个例子：

例子

当您单击按钮时，红色文本会向左滑出，但问题是动画完成后黄色文本会跳到新位置。红色文字滑出时，黄色文字如何实时“动画化”到新位置？

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);
});

Answer 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/