jquery .animate() mouseover / mousout
jquery .animate() mouseover / mousout
我有一个div,它可以在指定区域内灵活地改变位置。这工作得很好。现在我希望动画在鼠标悬停时暂停,在鼠标悬停时恢复,并在鼠标悬停时放大div,并在鼠标悬停时将其大小调整为先前的小尺寸。
我的代码如下所示:
function animateBubble(canvas, bubble){
newB = newSize();
newQ = newPosition(canvas, bubble);
oldQ = $(bubble).offset();
speed = calcSpeed([oldQ.top, oldQ.left], newQ);
$(bubble).animate({ // initial animation start of bubble
top: newQ[0],
left: newQ[1],
width: newB[0],
height: newB[1]
},
{ duration: speed, // set the duration
step: function( now, fx ) { // get the coordinates of the bubble dynamically
var offset = $(this).offset();
xPos = offset.left; // now position
yPos = offset.top;
nowWidth = $(this).width();
nowHeight = $(this).height();
},
complete: function(){ // do the whole animation again upon completion
animateBubble(canvas, bubble);
}
}).mouseover(function(){ // pause animation on mouseover
$(bubble).stop();
$(bubble).height(230);
$(bubble).width(230);
}).mouseleave(function(){ // restart animation on mouseout
//alert('hello');
$(this).height(nowHeight);
$(this).width(nowWidth);
$(this).start();
animateBubble(canvas, bubble); // doesn't want to start again
});
}
似乎在鼠标退出时,我可以在不调整div大小的情况下恢复动画,或者在不恢复动画的情况下调整div大小。
有人能帮我一下吗?
这里是一个工作的js提琴
http://jsfiddle.net/29cwcx04/谢谢
问题,我认为,是你的切割宽度和高度动画之前,它完成重新调整圆圈的大小回到正常的大小。这里有一个快速修复:
...mouseleave(function(){ // restart animation on mouseout
//alert('hello');
$(this).height(nowHeight);
$(this).width(nowWidth);
setTimeout(function(){animateBubble(canvas, bubble);},1000);
});
相关文章:
- 音频控件在mouseover上显示,在mouseout上淡出
- Gridview ImageButton更改mouseover和mouseout上的图像
- mouseOver上的隐藏图像问题
- Javascript将aruggments传递给mouseover函数
- mouseover和mouseleave文本颜色更改在指令链接中不起作用
- jQuery与导航菜单上的mouseover事件冲突.
- 使用mouseover方法时无法保护svg的颜色
- 有没有办法将mouseOver上的个人文本添加到完整日历中
- 在mouseover上添加边框,在mouseout上删除边框
- Mouseover和Mouseout的行为没有达到预期
- 如何降低JavaScript中Mouseover函数的资源密集度
- Fancybox:让它在mouseover/mouseout上工作
- 从匿名函数调用mouseover函数时失去作用域
- Javascript onClick and mouseOver function
- Mouseover event with Bodymovin JS
- 为什么mouseover只适用于第一行
- DOM:如何根据迭代器值设置元素宽度并在mouseover上调用函数
- 一些Raphael标签没有出现在Linechart Mouseover上
- 关闭mouseover上的一个函数——Javascript,jQuery
- jquery .animate() mouseover / mousout