Question

我正在尝试为div创建一个悬停动画，并希望它们回到原来的位置当用户徘徊时我有

$('.Img').live({
            mouseover: function(){

            $(this).css({'cursor': 'pointer'});
            var tooltip=$(this).next().attr('id');


          var tooltipDiv=$('#tooltip-' + tooltip);

          tooltipDiv.css('display', 'block');
          tooltipDiv.animate({ opacity: 0 }, 0);

          tooltipDiv.animate({'opacity':'1','top':'-=10'},500);

        },
        mouseout: function (){            
          $instance = $(this).css({'cursor': 'auto'});

          //back to the original position....but not sure how to do it....
           tooltipDiv.animate.....

        }
        })

我必须使用live，因为我使用的是Jquery 1.6。谢谢你的帮助...

Answer 1

您是否希望它们像在初始步骤中那样“动画”回原位？或者你是否希望他们立即回到他们开始的地方？

无论哪种方式，它只是反向工作的一个方面。您的动画很少，并且您知道起点的起点（opacity: 0，top: [$#]+=10）。你将遇到的重大事件是与突然的动画停止不一致。如果你告诉jQuery在top+=10事件上移动项目mouseout，那么它可能会在不同的地方结束，然后根据动画队列当前设置的方式而预期（这种情况很快就会发生mousein /鼠标移开）。或者它可能会继续完整地运行动画，这看起来也很奇怪。

使用.stop()阅读以使动画正常运行：jQuery .stop()

诀窍是让它回到它的初始起始位置而不是意外的起始位置。它可以像将像素值硬编码到代码中一样简单。或者我会设置一个变量来读取加载时的初始位置，如下所示：

$('.Img').live({
    mouseover: function(){
      selector = $(this).next();
      sel_top = selector.css('top');
      sel_opa = selector.css('opacity');

      selector.animate({'opacity':'1','top':'-=10'},500);

    },
    mouseout: function (){            
      selector.animate({'opacity' : sel_opa, 'top' : sel_top},500);
    }
})

动画在回调函数中

1 个答案: