Jquery 悬停时动画

发布于 2024-12-09 04:20:30 字数 304 浏览 0 评论 0原文

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

干杯,janik

编辑:

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

I'm looking for a very basic feature: I want to animate a div in it's position while the mouse hovers over a certain area of the window.
I've already figured out how and when to fire off the animate function the problem is, that it's limited in its time. I'm looking for a way to move the div relative to it's position while hovering.

Cheers, janik

Edit:

I've created a JDfiddle. Didn't know about that before. jsfiddle.net/Ru2mZ/7 To render out my problem: I want a continuous movement or animation of an object while the mouse is over the button. So a basic animation like $('#id').animate({left: 100},100) wouldn't work since it's limited to a fixed end position and a fixed amount of time.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

茶色山野 2024-12-16 04:20:30
        $('#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);
        };
        $('#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);
        };
静水深流 2024-12-16 04:20:30

这是悬停功能的文档。
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.
  }
); 

Here is the documentation of the hover function.
http://api.jquery.com/hover/

Basically, you have to

$("#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.
  }
); 
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文