在hover时移动图像10px并更改不透明度

我的下面的代码运行良好，但我也希望将图像向下移动10px并再次移回鼠标输出，并将不透明度恢复到0.7。

$('#drinksList section a img').load(function() { $(this).data('height', this.height); }).bind('mouseenter mouseleave', function(e) { $(this).stop().animate({ opacity: 1, height: $(this).data('height') * (e.type === 'mouseenter' ? 1.05 : 1) }); }); 

任何帮助，将不胜感激。

Answer 1

干得好：

 $('#drinksList section a img').load(function() { $(this).data('height', this.height); }).bind('mouseenter mouseleave', function(e) { var enter = e.type === 'mouseenter', height = $(this).data('height'); $(this).stop().animate({ 'margin-top': (enter ? 10 : 0), opacity: (enter ? 1 : 0.7), height: height * (enter ? 1.05 : 1) }); }); 

现场演示： http ： //jsfiddle.net/simevidas/YwU9u/

Answer 2

试试这个：

 $('#drinksList section a img').hover(function() { $(this).stop().animate({ opacity: 1.0, top: '+=10' // move it down by 10px }, 1000); // 1000 is the animation time in milliseconds }, function() { $(this).stop().animate({ opacity: 0.7, top: '-= 10' // move it back up }, 1000); }); 

Answer 3

试一试

 $('.image').each(function() { var top = parseInt($(this).css('top')); var height = $(this).height(); var width = $(this).width(); $(this).hover(function() { $(this).stop().animate({ opacity: 1.0, top: top + 10, height: height + 10, width: width + 10 }, 100); }, function() { $(this).stop().animate({ opacity: 0.7, top: top, height: height, width: width }, 100); }); }); 

http://jsfiddle.net/qnGPV/9