将图像悬停移动10px并更改不透明度 [英] Moving an image 10px on hover and changing opacity

问题描述

我下面的代码可以正常工作，但我还想将图像向下移动10px，然后在鼠标移开时再次将其移回，并将不透明度恢复到0.7.

I have my code below which works well but i also want to move the image down 10px and back again on mouseout as well as putting the opacity back to 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)
        });
    });

任何帮助将不胜感激.

Any help would be appreciated.

推荐答案

在这里:

$('#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/

这篇关于将图像悬停移动10px并更改不透明度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！