移动元素与jQuery -淡出然后进来？

Question

我已经设置了我的网站，使中心导航位于我的网站的h1标题之上。然后我向下滚动，h1移动到导航的左边，而导航对齐。

我使用jQuery移动元素，并将类添加到元素中。我将如何使h1淡出，然后像在第二张图片中那样在导航器旁边？我已经尝试过CSS转换轻松的东西，但它似乎只是快速移动后的导航，然后出现在前面。

有什么建议吗？

谢谢。

Answer 1

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

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

Answer 2

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

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

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

如果您查看API，您将看到可以定义一个函数，以便在动画完成后运行。

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

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

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

API

Answer 3

参见这里的一个fadeout移动fadein示例

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/