Question

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

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

有什么建议吗？

感谢。

Answer 1

对我而言，您似乎遇到了JavaScript的异步性问题。如果您想要一个动画跟随另一个动画，那么不能执行此操作：

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

两种动画都会同时执行。相反，您需要使用jQuery提供的Callback参数。

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

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

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

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

More info on the animate() API

Answer 2

如果我理解你真正想要的东西，你可以这样做。

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

Answer 3

点击此处查看fadeout-move-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'));
    })
});

修改

我添加了一个按钮来触发＆＃34;移动＆＃34;

http://jsfiddle.net/zxfneqqt/

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

3 个答案: