悬停时的 Jquery 动画

发布于 2024-08-11 08:07:54 字数 398 浏览 3 评论 0原文

我有一个文本，当鼠标悬停在它上面时我想为其添加动画效果例如：

$(".tabb tr").hover(
  function(){
    $(this).find("td #headie").animate({marginLeft:'9px'},'slow')
  },
  function() {
    $(this).find("td #headie").animate({marginLeft:'0px'},'slow')
  });

有了这个..当我将鼠标悬停在行上时..表格列通过稍微移动来动画。

这里的问题是：当我将鼠标光标重复移动到这些行上，然后停下来看看..即使我没有将鼠标移到它上面，动画也会持续一段时间。它稍后会继续移动......

我怎样才能阻止它？

原文

I have a text which I want to animate when am having a mouse over it
for eg:

$(".tabb tr").hover(
  function(){
    $(this).find("td #headie").animate({marginLeft:'9px'},'slow')
  },
  function() {
    $(this).find("td #headie").animate({marginLeft:'0px'},'slow')
  });

with this.. when am having mouse over the row.. the table column animates by moving little.

Problem here is: when I move the mouse cursor repeatedly over these rows and then stop and see.. the animation keeps going on for a while even if am not moving the mouse over it.
IT KEEPS MOVING ITSELF later..

how can I stop that?

分享到QQ

分享到微博

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

发布评论

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

歌入人心 2024-08-18 08:07:54

我发现 Chris Coyier 在 CSS Tricks 上写了一篇关于悬停时平滑 jquery 动画的非常好的文章：

http ://css-tricks.com/full-jquery-animations/

因此，将其适合您的代码将如下所示：

$(".tabb tr").hover(
function(){
  $(this).filter(':not(:animated)').animate({
     marginLeft:'9px'
  },'slow');
// This only fires if the row is not undergoing an animation when you mouseover it
},
function() {
  $(this).animate({
     marginLeft:'0px'
  },'slow');
});

本质上它会检查该行是否正在动画，如果没有，则只有这样它调用 mouseenter 动画吗？

希望您的行现在的动画有点像本页上的最后两个示例：

http://css-tricks.com/examples/jQueryStop /

A very well written article on smooth jquery animations on hover, that I found, was this one by Chris Coyier on CSS Tricks:

http://css-tricks.com/full-jquery-animations/

So fitting this to your code would look like this:

$(".tabb tr").hover(
function(){
  $(this).filter(':not(:animated)').animate({
     marginLeft:'9px'
  },'slow');
// This only fires if the row is not undergoing an animation when you mouseover it
},
function() {
  $(this).animate({
     marginLeft:'0px'
  },'slow');
});

Essentially it checks to see if the row is being animated and if it isn't, only then does it call the mouseenter animation.

Hopefully your rows will now animate somewhat like the last two examples on this page:

http://css-tricks.com/examples/jQueryStop/

回复收藏 0 原文

花想c 2024-08-18 08:07:54

我按照我想要的方式得到了它..以下是我所做的更改
"animate({marginLeft:'0px'},0)"

检查下面的代码..

$(document).ready(function(){
    $(".tabb tr").mouseover(function(){ $(this).find("td #headie").animate({marginLeft:'9px'},'fast') });
    $(".tabb tr").mouseout(function(){ $(this).find("td #headie").animate({marginLeft:'0px'},0) });
});

I got it the way I wanted.. the following was the change I made
"animate({marginLeft:'0px'},0)"

Check the code below..

$(document).ready(function(){
    $(".tabb tr").mouseover(function(){ $(this).find("td #headie").animate({marginLeft:'9px'},'fast') });
    $(".tabb tr").mouseout(function(){ $(this).find("td #headie").animate({marginLeft:'0px'},0) });
});

回复收藏 0 原文

北笙凉宸 2024-08-18 08:07:54

听起来你想绑定到 mousemove 而不是悬停，但也为 mouseout 创建一个处理程序，如 $(foo).mouseout(function(){$(this).stop();}) 来终止动画。

回复收藏 0 原文

奶气 2024-08-18 08:07:54

jQuery 提供了特殊的事件处理程序来满足您的需求:)
使用mouseenter和mouseleave

$(".tabb tr").mouseenter(
  function(){
    $(this).find("td #headie").animate({marginLeft:'9px'},'slow')
  });
$(".tabb tr").mouseleave(
  function() {
    $(this).find("td #headie").animate({marginLeft:'0px'},'slow')
  });

jQuery provides special eventHandlers for your needs :)
use mouseenter and mouseleave

$(".tabb tr").mouseenter(
  function(){
    $(this).find("td #headie").animate({marginLeft:'9px'},'slow')
  });
$(".tabb tr").mouseleave(
  function() {
    $(this).find("td #headie").animate({marginLeft:'0px'},'slow')
  });

回复收藏 0 原文

~没有更多了~