[英]Expanding content areas using jQuery animate function
I'm using the animate function in jQuery to re-size a content area when the user hovers over the element. 当用户将鼠标悬停在元素上时,我正在使用jQuery中的动画功能来调整内容区域的大小。
The script works fine but I cant work out how to stop the script from resizing more than once if the element is hovered over more than once. 该脚本可以正常工作,但是如果该元素悬停不止一次,我无法解决如何停止调整脚本的大小。
I have created a jsfiddle here I have also added the js I used. 我在这里创建了一个jsfiddle ,还添加了我使用的js。
var minheight = $('.section-fade').css("height");
$('.section-fade').hover(
function () {
$(this).animate({
height: $('.childsection').height()
}, 1000);
},
function () {
$(this).animate({
height: minheight
}, 1000);
});
Any ideas would be very much welcomed. 任何想法都将受到欢迎。
Cheers 干杯
What you're looking for is .stop()
. 您正在寻找的是
.stop()
。
.stop()
will cancel all animations on an object. .stop()
将取消对象上的所有动画。
http://jsfiddle.net/zxm9S/1/ http://jsfiddle.net/zxm9S/1/
var minheight = $('.section-fade').css("height");
$('.section-fade').hover(
function () {
$(this).stop().animate({
height: $('.childsection').height()
}, 1000);
},
function () {
$(this).stop().animate({
height: minheight
}, 1000);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.