javascript - jquery滑动效果与div同时出现

Question

我有这个例子:

EXAMPLE

当您单击按钮时，红色文本会向左滑出，但问题是黄色文本会在动画结束后跳转到新位置。如何在红色文字滑出的同时让黄色文字实时“动画”到新位置？

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/