基本上,当我通常将鼠标悬停在盒子上时,它会移动并返回到该位置,但是当您快速悬停几次时,盒子会向后移动并失去位置,知道为什么吗?谢谢!
另外我需要抓住当前的 div 位置,所以我$(this)
在悬停时使用。
这是代码:http: //jsfiddle.net/JdMqM/1/
html:
<div class="box_wrap">
<div class="box">
</div>
</div>
CSS:
.box_wrap {
width: 200px;
height: 200px;
border: 1px solid red;
position: relative;
margin: 10px;
}
.box {
top: 0;
left: 0;
background: green;
position: absolute;
width: 200px;
height: 200px;
}
js:
$('.box').hover(
function(){
var h = $(this).height();
var w = $(this).width();
var t = $(this).position().top;
var l = $(this).position().left;
$(this).animate({
'width': w + 20 + 'px',
'height': h + 20 + 'px',
'left': l + 20,
'top': t + 20
}, { duration: 200, queue: false });
},
function(){
var h = $(this).height();
var w = $(this).width();
var t = $(this).position().top;
var l = $(this).position().left;
$(this).animate({
'width': w - 20 + 'px',
'height': h - 20 + 'px',
'left': l - 20,
'top': t - 20
}, { duration: 200, queue: false });
}
);