jQuery DIV 动画

Posted 2023-05-08

【中文标题】jQuery DIV 动画

【英文标题】：Jquery DIV Animation

【发布时间】：2012-03-02 06:34:17

【问题描述】：

我正在尝试为我的#main div 设置动画，以便在单击“工作”时它淡出并滑过我的#header div 顶部，然后在单击“关于”或“时淡出并向下滑动”单击“联系”链接。出了点问题，它没有动画。不知道为什么。有人可以帮忙吗？

http://jsbin.com/odorah/edit#javascript,html,live

我知道理想情况下 .slideUp/.slideDown 函数应该是有序的，但由于某种原因，它会干扰我正在使用的 fittext 插件。仅供参考

$(document).ready(function()


    $('#workclick').click(function()
                        $('#main').animate(top:'-50%', opacity:'1',queue:false,duration:500, easing:"easeOutQuart");
                    , function()
                        $('#header').animate(top:'0px', opacity:'0',queue:false,duration:200);
                    );

                    $('#aboutclick').click(function()
                                        $('#main').animate(top:'50%', opacity:'0',queue:false,duration:500, easing:"easeOutQuart");
                                    , function()
                                        $('#header').animate(top:'0px', opacity:'1',queue:false,duration:200);
                                    );
                    $('#contactclick').click(function()
                                                        $('#main').animate(top:'50%', opacity:'0',queue:false,duration:500, easing:"easeOutQuart");
                                                    , function()
                                                        $('#header').animate(top:'0px', opacity:'1',queue:false,duration:200);
                                                    );
);

【问题讨论】：

您应该始终在问题中包含相关代码。这样，如果您链​​接到的文件/页面不复存在，您的问题仍然存在，并且将来可能对其他人有用。

【参考方案1】：

好的，找到你的问题了。将您的第一次点击功能替换为以下内容：

$('#workclick').click(function()
    $('#main').animate(
      top:'-50%', opacity:'1',
      
        queue:false,
        duration:500,
        complete:function()
            $('#header').animate(
              top:'0px', opacity:'0',
              queue:false,duration:200
            );
        
      
    );
);

您可以稍后添加过渡。问题是，JQuery 有两种形式的 animate 函数。两者都允许您在完成时回调。他们在这里：

.animate( properties [, duration] [, easing] [, complete] )
.animate( properties, options )

来源：http://api.jquery.com/animate/

编辑：使用回调或排队可以解决问题，因为 JQuery 动画是排队的。 jQuery无法制作同步动画，见：https://***.com/a/1594085/844728

附：您必须修改对 .animate 的所有调用，更正此错误。

【讨论】：

哇，它做到了。谢谢！但它确实引发了另一个问题。有没有办法为整个#header div的高度设置动画，而不是设置预定义的高度？我的页面是基于 %s 的，因此 div 的高度会根据屏幕大小而变化。 jsbin.com/ivewah/2/edit#javascript,html,live

此外，当#main 向下动画时，动画中会发生跳跃。是什么原因造成的？

我修复了向下动画时发生的跳跃。我认为最好的办法是将#main div 动画到页面顶部。不知道该怎么做。有任何想法吗？ jsbin.com/ivewah/5/edit

让我看看我是否正确理解了您的问题。您是在问如何独立于窗口大小上下推动事物，对吗？你是对的，当你调整页面大小时会出现问题。尝试将所有内容都以 % 表示是您的美德，但是对于这种特定情况，您在 ems 中设置了标题字体，并在其上方设置了固定像素高度的图片。这就是问题。最简单的解决方法：简单地计算出它们一起产生了多少像素（em 通常是 16px，或者只是将其设置为 px）并以像素为单位设置 #main 动画。也将标题高度设置为该像素数。

我回答了你原来的问题吗？我回答你的后续了吗？