Question

我正致力于模仿香奈儿的页脚动画，但我似乎无法做到正确。我正在测试的网站位置是here。在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>

jQuery Animate On Click Toggle

2 个答案: