悬停时将图像移动 10 像素并更改不透明度答案

【问题标题】：Moving an image 10px on hover and changing opacity悬停时将图像移动 10 像素并更改不透明度
【发布时间】：2011-08-11 19:30:11
【问题描述】：

我的代码在下面运行良好，但我还想将图像向下移动 10 像素，然后在鼠标移出时再次返回，并将不透明度恢复为 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)
        });
    });

任何帮助将不胜感激。

【问题讨论】：

标签： jquery

【解决方案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/

【讨论】：

【解决方案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);
});

【讨论】：

【解决方案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

【讨论】：

关闭 :) 谢谢你，但如果你一直悬停在它们上面（当你在一个屏幕上有很多东西时）它会不断调整它们的大小并向后移动它们
举个例子...你可以一直悬停直到它消失:)