jquery - .animate 的 JQuery 替代品？

Question

无论如何，我有一个 JQuery 脚本来让我的页脚始终位于浏览器的底部。

问题是它使用“动画”来强制它向下或向上移动，这会在每次页面加载时显示一个从顶部滚动到底部的页脚。就像一个飞行的页脚栏。

我想知道“Animate”是否有替代方案来强制它显示在底部，现在显示它向下拖动的滚动效果？

这里的代码片段，我相信“.animate”是我需要的替代方案。

 $(window).bind("load", function() { 

   var footerHeight = 0,
       footerTop = 0,
       $footer = $("#Footer");

   positionFooter();

   function positionFooter() {

            footerHeight = $footer.height();
            footerTop = ($(window).scrollTop()+$(window).height()-footerHeight)+"px";


           if ( ($(document.body).height()+footerHeight) < $(window).height() + 150) {
               $footer.css({
                    position: "absolute"
               }).stop().animate({
                    top: footerTop
               })
           } else {
               $footer.css({
                    position: "static"
               })
           }

   }

   $(window)
           .scroll(positionFooter)
           .resize(positionFooter)

});

Answer 1

您可以简单地将页脚放在屏幕底部的固定位置 -

#footer { position:fixed; bottom:0px }

Answer 2

如果您不需要动画，请选择 CSS 解决方案。正如@lix 提到的。

#footer { position:fixed; bottom:0px }

另一方面，如果有动画，有两种方法：

1. JS解决方案

2. CSS3 过渡属性。

   #footer { 
      position: fixed;
      bottom: 0px;
   
      -webkit-transition: 3s linear 1s;
      -moz-transition: 3s linear 15s;
      -o-transition: 3s linear 1s;
      -ms-transition: 3s linear 1s;
      transition: 3s linear 1s;
   }
   

Answer 3

我想到了。我需要将“.animate”的延迟指定为“0”。以下是更新后的代码。

  if ( ($(document.body).height()+footerHeight) < $(window).height() + 150) {
               $footer.css({
                    position: "absolute"
               }).stop().animate({
                    top: footerTop
               }, 0)
           } else {
               $footer.css({
                    position: "static"
               })
           }