本文介绍了Jquery动画底层问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

很奇怪。
我有一个动画,当我在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动画底层问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

07-23 17:16
查看更多