Question

var h=0;
var w=0;
    $(".extend").hover(function() {

        //alert(h);
        $(this).css({'z-index' : '999' });
        $(this).addClass("hover").filter(":not(:animated)").stop()
            .animate({
                marginTop: '-110px', 
                marginLeft: '10px', 
                top: '80%', 
                left: '80%',
                width: 387, 
                height: 487,
                padding: '0px' 
            }, 200);
         h=$(this).height();
         w=$(this).width();
        } , function() {
        $(this).css({'z-index' : '0'});
        $(this).removeClass("hover").stop()
            .animate({
                marginTop: '0', 
                marginLeft: '0',
                top: '0', 
                left: '0', 
                width:w,
                height:h,
                padding: '0px'
            }, 400);
    });

<img class="extend" src="a.jpg">
<img class="extend" src="b.jpg">

我的悬停功能有问题我无法将图像恢复到原始大小如果我将它悬停到a.jpg它会扩展然后我将鼠标悬停在b.jpg而不等待a.jpg返回到原始大小会变得越来越大。

如何在不改变大小的情况下悬停和扩展？

Answer 1

除非您需要更改宽度和高度，否则只应设置一次，假设两个图像的大小相同，应该可以使用

var h=$(".extend").height();
var w=$(".extend").width();
    $(".extend").hover(function() {

        //alert(h);
        $(this).css({'z-index' : '999' });
        $(this).addClass("hover").filter(":not(:animated)").stop()
            .animate({
                marginTop: '-110px', 
                marginLeft: '10px', 
                top: '80%', 
                left: '80%',
                width: 387, 
                height: 487,
                padding: '0px' 
            }, 200);
        } , function() {
        $(this).css({'z-index' : '0'});
        $(this).removeClass("hover").stop()
            .animate({
                marginTop: '0', 
                marginLeft: '0',
                top: '0', 
                left: '0', 
                width:w,
                height:h,
                padding: '0px'
            }, 400);
    });

FIDDLE

EDIT--
对于具有不同尺寸的图像，使用.data（）

将它们保存在元素中

$(".extend").each(function(){
    $(this).data('width', $(this).width());
    $(this).data('height', $(this).height());
})
$(".extend").hover(function() {

    //alert(h);
    $(this).css({'z-index' : '999' });
    $(this).addClass("hover").filter(":not(:animated)").stop()
        .animate({
            marginTop: '-110px', 
            marginLeft: '10px', 
            top: '80%', 
            left: '80%',
            width: 387, 
            height: 487,
            padding: '0px' 
        }, 200);
    } , function() {
    $(this).css({'z-index' : '0'});
    $(this).removeClass("hover").stop()
        .animate({
            marginTop: '0', 
            marginLeft: '0',
            top: '0', 
            left: '0', 
            width:$(this).data('width'),
            height:$(this).data('height'),
            padding: '0px'
        }, 400);
});

FIDDLE

EDIT -2-
解决移位问题的一种简单方法是将img标记包装在内联块元素中，将元素尺寸设置为图像的尺寸，然后使img绝对定位

<span><img class="extend" src="a.jpg"></span>
<span><img class="extend" src="b.jpg"></span>

$(".extend").each(function(){
    $(this).data('width', $(this).width());
    $(this).data('height', $(this).height());
    $(this).parent().css({display:'inline-block', width: $(this).width(), height: $(this).height()})
    .end().css({position:'absolute'});
})
$(".extend").hover(function() {

    //alert(h);
    $(this).css({'z-index' : '999' });
    $(this).addClass("hover").filter(":not(:animated)").stop()
        .animate({
            marginTop: '-110px', 
            marginLeft: '10px', 
            top: '80%', 
            left: '80%',
            width: 387, 
            height: 487,
            padding: '0px' 
        }, 200);
    } , function() {
    $(this).css({'z-index' : '0'});
    $(this).removeClass("hover").stop()
        .animate({
            marginTop: '0', 
            marginLeft: '0',
            top: '0', 
            left: '0', 
            width:$(this).data('width'),
            height:$(this).data('height'),
            padding: '0px'
        }, 400);
});

FIDDLE

Answer 2

以这种方式尝试：

 $(".extend").hover(function() {

    //alert(h);
     h=$(this).height();
     w=$(this).width();
    $(this).css({'z-index' : '999' });
    $(this).data('width', w);
    $(this).data('height',h);
    $(this).addClass("hover").filter(":not(:animated)").stop()
        .animate({
            marginTop: '-110px', 
            marginLeft: '10px', 
            top: '80%', 
            left: '80%',
            width: 387, 
            height: 487,
            padding: '0px' 
        }, 200);

    } , function() {
    $(this).css({'z-index' : '0'});
    h=$(this).data('height');
     w=$(this).data('width');
    $(this).removeClass("hover").stop()
        .animate({
            marginTop: '0', 
            marginLeft: '0',
            top: '0', 
            left: '0', 
            width:w,
            height:h,
            padding: '0px'
        }, 400);
});

Answer 3

由于w和h是全局变量，因此每次悬停新元素时，它们都会变得越来越大。

使用.data()属性

将它们存储在实际元素中

$(".extend").hover(function() {
    $(this).css({'z-index' : '999' });
    $(this).addClass("hover").filter(":not(:animated)").stop()
        .animate({
            marginTop: '-110px', 
            marginLeft: '10px', 
            top: '80%', 
            left: '80%',
            width: 387, 
            height: 487,
            padding: '0px' 
        }, 200);

     $(this).data('original-height', $(this).height());
     $(this).data('original-width', $(this).width());

    } , function() {
    $(this).css({'z-index' : '0'});
    $(this).removeClass("hover").stop()
        .animate({
            marginTop: '0', 
            marginLeft: '0',
            top: '0', 
            left: '0', 
            width:$(this).data('original-width'),
            height:$(this).data('original-height'),
            padding: '0px'
        }, 400);
});

jquery悬停功能

3 个答案: