0

我正在尝试为 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。谢谢您的帮助...

4

1 回答 1

0

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

无论哪种方式，它只是反向工作的问题。您的动画非常小，并且您知道起点从哪里开始 ( opacity: 0, top: [$#]+=10)。您将遇到的最大问题是与突然的动画停止不一致。如果您告诉 jQuery 移动事件top+=10上的项目，mouseout它可能会在不同的地方结束，那么您所期望的基于当前动画队列的设置方式（这种情况在快速鼠标输入/鼠标输出时经常发生）。或者它可能会继续完整地运行动画，这看起来也很奇怪。

阅读使用.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);
    }
})
于 2012-08-21T23:18:34.623 回答