jquery - 复杂的 jQuery .hover 工作

Question

下面的代码给我带来了很多麻烦。需要注意的是， .hover 会更改背景图像。首先，如何将两者与 .hover 结合，而不是单独的 mouseenter 和 mouseleave？其次，我怎样才能使 div 向上移动时，背景图像同时褪色？

$('div.designbox.orangehello').mouseenter(function() {
   $('div.designbox.orangehello').animate({
     top: '-=10',
   }, 55, function() {
     $(this).addClass('hover');
   });
 });

 $('div.designbox.orangehello').mouseleave(function() {
   $('div.designbox.orangehello').animate({
     top: '+=10',
   }, 55, function() {
     $(this).removeClass('hover');
   });
 });

Answer 1

要将两者结合使用.hover()，请执行以下操作：

$('div.designbox.orangehello').hover(function() {
   $(this).animate({ top: '-=10' }, 55, function() {
     $(this).addClass('hover');
   });
}, function() {
   $(this).animate({ top: '+=10' }, 55, function() {
     $(this).removeClass('hover');
   });
});

至于褪色，你需要发布你的标记，你需要一个额外的<div>或包含其他背景的东西。

其他一些注意事项，你有{ top: '-=10', }你的动画参数......注意那些尾随的逗号，它们会给你带来麻烦，尤其是在 IE 中。此外，$('div.designbox.orangehello')如果您要为其中的很多设置动画，请将其改回，但如果您希望当前的仅$(this)像我上面那样使用。