问题描述
很奇怪。
我有一个动画,当我在DIV上播放时开始播放。
进入这个div我有另一个绝对的位置,我想向上移动,直到鼠标停留在主div上,当我离开主div时,你的位置下降。简单的悬停效果。
我写下了这个功能,它可以很好地解决一个奇怪的错误。
It's strange.I have an animation that start when i .hover on a DIV.Into this div i have another in position absolute that i want to move up until the mouse stay on main div and go down in your position when i go out of main div. A simple hover effect.I have write down this function that work well apart a strange bug.
var inside = $('.inside')
inside.hover(function() {
$(this).children(".coll_base").stop().animate({
bottom:'+=30px'
},"slow")
}, function() {
$(this).children(".coll_base").stop().animate({
bottom:'-=30px'
},"slow");
});
我需要+ = 30和 - = 30因为我必须将此函数应用于div范围不同的底部。
问题在于,如果我将鼠标悬停在div上,那么DIV会生效,但是当它下降时,他会降低每个动画的底部值。如果我从主div上下来,我看到动画div甚至超出了主div。
我想我想念一些东西来解决这个bug。
感谢您的帮助
i need +=30 and -=30 because i have to apply this function to a range of div with different bottom.The problem is that if i hover on and out of div the DIV animate right but when go down he decrease the value of bottom every animation. If i go up and down from the main div i see that the animated div go down even beyond the main div.I think that i miss something to resolve this bug.Thanks for any help
推荐答案
如果底部
是最初不是 0
,那么你可以存储初始的最低值,并在第二个函数中使用它。 (如果最初的底部
是 0
,那么就使用它。)
If the bottom
is not 0
initially, then you could store the initial bottom value, and use that in the second function. (If the initial bottom
is 0
, then just use that.)
在下面的示例中,初始底部
位置使用 data()
属性存储在
里面,然后在第二个处理程序中检索它以返回到原始位置。
In the example below, the initial bottom
position is stored using the data()
attribute for inside
, then it is retrieved in the second handler to return to the original position.
实例:
var inside = $('.inside');
inside.hover(
function() {
if(!inside.data('bottom')) {
inside.data('bottom',$(this).children(".coll_base").css('bottom'));
}
$(this).children(".coll_base").stop().animate({ bottom:'+=30px' },"slow")
},
function() {
$(this).children(".coll_base").stop().animate({bottom:$(this).data('bottom') },"slow");
}
);
这篇关于Jquery动画底层问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!