javascript - jQuery幻灯片效果与div同时出现

我有这个例子：

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

最佳答案

黄色文本跳跃，因为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/