jquery - 动画时间不起作用

Question

我的 footer 部分有以下代码 - 因此，当我将鼠标悬停在页脚上时，页脚的高度会增加，上面的 div 会稍微减小

但我希望这在几秒钟内发生，但我的代码不起作用。

我的代码如下:

$(document).ready(function() {
    $('footer').mouseenter(function() {
       $(this).css({height:"100px"},5000);
       $(".whyUs").css({height:"450px"},5000);
    });
    $('footer').mouseleave(function() {
       $(this).css({height: '50px'},5000); 
       $(".whyUs").css({height:"500px"},5000);
       $("#fimg").css({display: "none"});
    });
});

我错过了什么？

Answer 1

CSS3 过渡来救援

要保留 jQ 的 .css() 方法，只需添加:transition: 1s; (或使用 ms 值)到元素你想看动画。

jsBin demo

<小时/>

jQuery .animate() 方法

您无法对 .css() 进行动画处理(除非您在 CSS 中设置:transition: 1s;!)，但 .animate()

$(this).animate({height: 100}, 5000);
//      ^^^^^^^ instead of .css

也不需要设置“px”，px是jQuery中的默认值，只需使用该值即可。
另外，为了防止快速进入/离开时动画累积，请使用 .stop()

jQuery(function($) { // DOM ready and $ alias secured

   var $whyUs = $(".whyUs"); // Cache your selectors
   var $fimg  = $("#fimg");

   $('footer').hover(function() {
       $(this).stop().animate({height: 100}, 5000);
       $whyUs.stop().animate({height:450}, 5000);
       // what about using $fimg.css({display: "block"}); ?
   }, function() {
       $(this).stop().animate({height: 50}, 5000); 
       $whyUs.stop().animate({height:500}, 5000);
       $fimg.css({display: "none"});
   });

});

或者如果您熟悉三元运算符？:

   $('footer').hover(function( e ) {
       var mE = e.type==="mouseenter";
       $(this).stop().animate({height: mE ? 100 : 50}, 5000);
       $whyUs.stop().animate({height: mE ? 450 : 500}, 5000);
       // what about using $fimg.css({display: mE ? "block" : "none"}); ?
   });