使用 jQuery 移动元素 - 淡出然后进入？答案

【问题标题】：Moving elements with jQuery - Fade out then in?使用 jQuery 移动元素 - 淡出然后进入？
【发布时间】：2014-10-17 01:41:24
【问题描述】：

我已经设置好我的网站，使居中的导航位于我网站的 h1 标题上方。然后我向下滚动，h1 移动到导航的左侧，而导航向右对齐。

我使用 jQuery 移动元素并向元素添加类。我将如何让 h1 淡出然后像第二张图片中那样在导航旁边？我试过 CSS transition ease-in-out 的东西，但它似乎只是在导航后面快速移动，然后出现在前面。

有什么建议吗？

谢谢。

【问题讨论】：

什么图片？请包括它
请包含代码示例或使用 jsfiddle.net 来说明问题。

标签： jquery css transition

【解决方案1】：

对我来说，您似乎遇到了 JavaScript 的 异步特性 的问题。如果您希望一个动画跟随另一个动画，您不能这样做：

$(selector).animate(...);
$(selector).animate(...);

两个动画将同时执行。相反，您需要使用 jQuery 提供的回调参数。

如果您查看 API，您会发现您可以定义一个函数以在动画完成时运行。

$(selector).animate( {properties} , duration , easing , complete );

为了完成，你传递一个包含下一个动画的函数。

$(selector).animate( {properties} , duration , easing , function() {
    $(selector).animate( {properties} );
});

More info on the animate() API

【讨论】：

【解决方案2】：

如果我明白你真正想要什么，你可以这样做。

$(selector).fadeOut(500, function(){
  // Move the element as you wish
  $(selector).fadeIn();
});

【讨论】：

【解决方案3】：

这里是一个淡出移动淡入淡出的例子

http://jsfiddle.net/atk49os1/

<div id=box1>
    aaa
    <span>zzz</span>
</div>
<div id=box2>
    bbb
</div>
$(document).ready(function(){
    $('span').fadeOut('slow',function(){
        $('#box2').append($(this).fadeIn('slow'));
    })
});

编辑：

我添加了一个按钮来触发“移动”

http://jsfiddle.net/zxfneqqt/

【讨论】：