悬停时Jquery动画答案

【问题标题】：Jquery animate while hover悬停时Jquery动画
【发布时间】：2011-10-07 10:09:50
【问题描述】：

我正在寻找一个非常基本的功能：当鼠标悬停在窗口的某个区域上时，我想在 div 的位置设置动画。我已经弄清楚问题是如何以及何时触发动画功能，它的时间有限。我正在寻找一种在悬停时相对于其位置移动 div 的方法。

干杯，贾尼克

编辑：

我创建了一个 JDfiddle。以前不知道这件事。 jsfiddle.net/Ru2mZ/7 解决我的问题：当鼠标悬停在按钮上时，我想要一个对象的连续移动或动画。因此，像 $('#id').animate({left: 100},100) 这样的基本动画将无法工作，因为它仅限于固定的结束位置和固定的时间。

【问题讨论】：

可能值得为您迄今为止所做的事情提供一个 JSFiddle...这样可以更快/更容易地帮助某人。
参考这个现有问题：[stackoverflow.com/questions/2127458/… 如果这对您有帮助，那就太好了。 [1]:stackoverflow.com/questions/2127458/…
这是正确的 timbo。 JSfiddle URL 是 jsfiddle.net

标签： jquery jquery-animate

【解决方案1】：

        $('#someDiv').bind('mouseenter', function () {
            this.iid = setInterval(function () {
                aniDiv();
            }, 25);
        }).bind('mouseleave', function () {
            this.iid && clearInterval(this.iid);
        });
        function aniDiv() {
            $('#someDiv').animate({ marginLeft: '-=200px' },10);
        };

【讨论】：

【解决方案2】：

这里是悬停功能的文档。 http://api.jquery.com/hover/

基本上，你必须

$("#div-id").hover(
  function () {
    //Do whatever you want to any element when the mouse is on the div with id: div-id. If you want to change anything related to the div being hoved, use the $(this) selector.
  },
  function () {
    //Do whatever you want to any element when the mouse was on the div with id: div-id and leaves it. If you want to change anything related to the div being hoved, use the $(this) selector.
  }
);

【讨论】：

我完全了解悬停功能的工作原理。问题要复杂得多，涉及到 animate 函数。