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/

Jquery幻灯片效果同时div是下一个

1 个答案: