我正在使用 jquery 移动一个 div。 但还有一些地方需要改进
当鼠标靠近左边框时,div不断向右移动,然后向左移动。 这是正常行为,因为对鼠标敏感的区域正在移动。 你有什么建议来改进这个动画?
这是我的代码,这是一个 fiddle
var $content = $("#content");
var $main_container = $("#main_container");
$content.hover(
function () {
$main_container.transition({
x: '15px',
y: '15px',
width: '110px',
height: '205px'
}, 200);
},
function () {
$main_container.transition({
x: '0px',
y: '0px',
width: '95px',
height: '190px'
}, 200);
});
});
我也尝试过 mouseenter 但结果相同:
$content.mouseenter(function() {
$main_container.transition({ x: '15px', y: '15px', width: '205px', height: '205px' },200);
}).mouseout(function() {
$main_container.transition({ x: '0px', y: '0px', width: '190px', height: '190px' },200);
});
最佳答案
当导致过渡的容器正在移动时,它显然会影响您的悬停,尤其是当容器远离鼠标指针时。我建议移动一个容器内的元素,并让该容器触发过渡。这样,容器永远不会移动,悬停保持稳定,动画将正常工作。
Here's a fiddle ,这是示例(显然您可以使容器透明,因此不可见):
HTML:
<div id="container">
<div id="mover"></div>
</div>
CSS:
#container{
width: 200px;
height: 200px;
background-color: #ccc;
}
#mover{
width: 100px;
height: 100px;
background-color: orange;
}
JavaScript:
$(function(){
$('#container').hover(
function(){
$('#mover')
.stop(false, false)
.transition({x:50, y:50});
},
function(){
$('#mover')
.stop(false, false)
.transition({x:0, y:0});
}
);
});
希望对您有所帮助! :)
关于javascript - 鼠标悬停时如何改善此动画效果循环播放,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18852253/