使用 Jquery 鼠标悬停时放大图像？

Enlarging images when mouseover using Jquery?

提问by FlyingCat

I am trying to enlarge the images when mouseover and reduce the size back to normal after mouseout. I have the following:

我试图在鼠标悬停时放大图像并在鼠标移开后将尺寸缩小到正常水平。我有以下几点：

$('#image img').live("mouseover", function(){
          var $this=$(this);

          $this.attr('width','25%');
          $this.attr('height','25%');


       })

The enlarging part works fine but I am not sure how to reduce the size after mouseout. Also, I think my codes are bit ugly and not sure how to fix it. Thanks a lot.

放大部分工作正常，但我不确定如何在鼠标移开后缩小尺寸。另外，我认为我的代码有点难看，不知道如何解决。非常感谢。

回答by Tats_innit

Try this: http://jsfiddle.net/FPKAP/11/orusing hover: http://jsfiddle.net/FPKAP/12/

试试这个：http: //jsfiddle.net/FPKAP/11/或使用悬停：http: //jsfiddle.net/FPKAP/12/

When you will hover over the HULK it will zoomin and on mouse out zoom out.

当您将鼠标悬停在 HULK 上时，它将放大并在鼠标移开时缩小。

This should help the need, lemme know if I misunderstood anything please, :)

这应该有助于需求，如果我误解了什么，请让我知道， :)

code

代码

$('#zoomimg').mouseenter(function() {
    $(this).css("cursor","pointer");
    $(this).animate({width: "50%", height: "50%"}, 'slow');
});

$('#zoomimg').mouseleave(function() {   
    $(this).animate({width: "28%"}, 'slow');
});

code

代码

$('#zoomimg').hover(function() {
    $(this).css("cursor", "pointer");
    $(this).animate({
        width: "50%",
        height: "50%"
    }, 'slow');

}, function() {
    $(this).animate({
        width: "28%"
    }, 'slow');

});?

回答by shali ravi

Increasing the width and height of the image , changes the position of the image (ie) it is enlarged but not in the same position where the original image was present.

增加图像的宽度和高度，改变图像的位置（即）它被放大但不在原始图像所在的相同位置。

Using Scaling property will address this issue.

使用 Scaling 属性将解决这个问题。

.transition {
    -webkit-transform: scale(2); 
    -moz-transform: scale(2);
    -o-transform: scale(2);
    transform: scale(2);
}

Fiddle link : http://jsfiddle.net/RC7kb/178/

小提琴链接：http: //jsfiddle.net/RC7kb/178/

回答by JCOC611

You can use this: jsFiddle

你可以使用这个：jsFiddle

$('#image').hover(function(){
    $(this).css({width:"100%",height:"100%"});
},function(){
    $(this).css({width:"50%",height:"50%"});   
});

回答by Blender

I'd first try CSS for this:

为此，我首先尝试使用 CSS：

#image img {
  width: 50%;
  height: 50%;
}

#image img:hover {
  width: 100%;
  height: 100%;
}