0
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 返回到原始大小,它会变得更大和更大。

我如何在不改变大小的情况下悬停和展开?

4

3 回答 3

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);
    });

小提琴

编辑——
对于不同尺寸的图像,使用 .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);
});

小提琴

EDIT-2-
解决移位问题的一种简单方法是将 img 标签包装在 inline-block 元素中,将元素尺寸设置为图像的尺寸,然后使 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);
});

小提琴

于 2012-06-13T05:29:58.917 回答
0

试试这种方式:

 $(".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);
});
于 2012-06-13T05:11:31.370 回答
0

由于wh是全局变量,每次悬停一个新元素时,它们都会变得越来越大。

.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);
});
于 2012-06-13T05:11:38.503 回答