动画时间不起作用

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 $('#frmCase').on('shown', function (e) { $.clearFormFields(this) $('#branch1').get(0).selectedIndex = 0; $('#branch2').get(0).selectedIndex = 0; $('#branch1').trigger('chosen:updated'); $('#branch2').trigger('chosen:updated'); }); 救援

要保留jQ的transition方法，只需将ie：.css()（或使用 ms 值）添加到要查看动画的元素。

<强> jsBin demo

jQuery transition: 1s;方法

您无法为.animate()制作动画（除非您在CSS中设置为：.css()！）但transition: 1s;

.animate()

此外，无需设置$(this).animate({height: 100}, 5000); // ^^^^^^^ instead of .css ，px是jQuery中的默认值，只使用该值。
还可以防止快速进入/离开使用"px"

时的动画构建

.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"}); }); });

?: