Question

我正在尝试为网页中的页脚部分设置动画，并发现jQuery .animate()方法在使用百分比时没有“动画”（显然是jQuery 1.10.2中仍然没有修复的错误）？）。因此，正如another answer on SO所建议的，我应该使用符号表示父级的高度，加上'px'以允许jQuery正确地设置动画。所以我试过了，但这打破了这个功能：/

从我的JS Fiddle，我有这段代码：

$(function () {
 var open = false;
 $('#footbutton').click(function () {
     if (open === false) {
         $('#footcontent').animate({
             height: '100%'
         });

         open = true;
     } else {
         $('#footcontent').animate({
             height: '0px'
         });

         open = false;
     }
   });
  });

这是有效的，除了#footcontent div立即弹出没有动画（但在关闭时工作正常，因为我在px中设置了高度）。用height: '100%'替换height: $('footer').height() +'px'会破坏函数，由于某种原因，jQuery现在看到父级的高度为0px，并且不能对高度进行任何更改。

两者如何不同？我已尝试将$('footer').height()替换为$(#footcontent).parent().height()，这也是不行的。当然，我在这里错过了一些东西或者只是在密集......这是我的时间凌晨4点........

Answer 1

你必须使用CSS3过渡动画max-height属性：

DEMO

#footcontent.open {
    max-height:500px; /*set bigger than it would ever be*/
    transition: max-height 0.6s linear;
    -webkit-transition: max-height 0.6s linear;
    -moz-transition: max-height 0.6s linear;
    -o-transition: max-height 0.6s linear;
}

JS：

 $(function () {
     var open = false;
     $('#footbutton').click(function () {
         $('#footcontent').toggleClass('open');
     });
 });

这里使用jquery animate：

DEMO

$(function () {
     var open = false;
     $('#footbutton').click(function () {
         if (open === false) {
             $('#footcontent').animate({
                 maxHeight: 500 /*set bigger than it would ever be*/
             });

             open = true;
         } else {
             $('#footcontent').animate({
                 maxHeight: 0
             });

             open = false;
         }
     });
 });

Answer 2

您应该知道，为了使百分比值适用于元素，应确定其父项高度。为什么不改为<footer>高度的动画，工作方式相同。

请参阅此fiddle。

干杯！

parent（）。height（）和父高度的100％似乎是不同的值

2 个答案: