复杂的 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');
   });
});

：对于淡入淡出，您需要发布标记，您需要额外的

或包含其他背景的内容。

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