jquery悬停函数 var h=0； var w=0； $（“.extend”）.hover（函数（）{ //警报（h）； $（this.css（{'z-index'：'999'）； $（this.addClass（“hover”）.filter（“：not（：animated）”）.stop（） .制作动画({ marginTop:“-110px”， marginLeft:'10px'， 排名前：“80%”， 左：“80%”， 宽度：387， 身高：487， 填充：“0px” }, 200); h=$（this）.height（）； w=$（this）.width（）； }，函数（）{ $（this.css（{'z-index'：'0'）； $（this.removeClass（“hover”）.stop（） .制作动画({ marginTop:'0'， marginLeft:'0'， 顶部：“0”， 左：“0”， 宽度：w， 高度:h,， 填充：“0px” }, 400); });

我的悬停函数有问题，我无法使图像恢复到原始大小。如果我将图像悬停到a.jpg，它将展开，然后我悬停到b.jpg，而不等待a.jpg返回到原始大小，它将变得越来越大

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

请尝试以下方法：

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">

---

由于

w

和

h

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

使用

.data（）

属性将它们存储在实际元素中：

 $(".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);
});

---

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

$(".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);
});

编辑--
对于具有不同维度的图像，请使用.data（）将其保存在元素中

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

$(".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);
});

​
$（“.extend”）.each（函数（）{
$（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（函数（）{
//警报（h）；
$（this.css（{'z-index'：'999'）；
$（this.addClass（“hover”）.filter（“：not（：animated）”）.stop（）
.制作动画({
marginTop:“-110px”，
marginLeft:'10px'，
排名前：“80%”，
左：“80%”，
宽度：387，
身高：487，
填充：“0px”
}, 200);
}，函数（）{
$（this.css（{'z-index'：'0'）；
$（this.removeClass（“hover”）.stop（）
.制作动画({
marginTop:'0'，
marginLeft:'0'，
顶部：“0”，
左：“0”，
宽度：$（this）.data（'width'），
高度：$（this）.data（'height'），
填充：“0px”
}, 400);
});

---

当我以超高速进出鼠标时，测试不起作用。当我以超高速进出鼠标时，测试不起作用。它变得越来越大。我旁边的文本仍然被推到右边，它可以工作，但它仍然不能解决图像展开时的对齐问题。图像旁边的元素将随着图像的展开而移动。如何解决？提前谢谢。这很奇怪，它在小提琴上工作，但在我的网页上不工作。可能的问题是什么？我所有的图片都被移到了框架的左上角。它可能受到网页上css的影响，或者网页上的脚本可能有错误，从而停止执行，还有许多其他原因

$(".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);
});

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