我有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"});
});
});
我错过了什么?
答案 0 :(得分:4)
$('#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
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"});
});
});
?: