jquery - jQuery 动画点击切换

Question

我正在模仿香奈儿的页脚动画，但我似乎无法做到正确。我正在测试的站点位置在这里。在chanels网站上，每当用户滚动或点击更多时，页脚就会 100% 覆盖背景中的 div。我已经达到了 100% 的高度，但我的 jquery 动画不起作用。有什么帮助吗？

<script>
    $(document).ready(function() {
      $(".handle").toggle(function() {
            //$('#footer').animate(),
            $('#footer').animate({top: "0px"}, 1000);
        }, function() {
            //$('#footer').removeClass('animateHeight'),
            $('#footer').css("top", "");
            //$('#footer').animate({bottom: "0"}, "slow");
       });
      });
</script>

我知道这与 .css("top", ""); 因为它没有动画但删除了css，但这是我可以让页脚回到底部的唯一方法。帮助？- 谢谢。

Answer 1

将此CSS添加到您的footer

#footer {
    top: 92%;
}

并将您的代码更改为此

<script>
    $(document).ready(function() {
      $(".handle").toggle(function() {
            $('#footer').animate({top: "0px"}, 1000);
        }, function() {
            $('#footer').animate({top: "92%"}, 1000);            
       });
    });
</script>

Answer 2

修改你的脚本如下：

    <script>
        $(document).ready(function() {  
            $(".handle").toggle(function() {
                $('#footer').animate({top: "0px"}, 1000);
            }, function() {
                $('#footer').animate({top: "null"}, 1000);
           });
         });
    </script>