有没有办法在使用Jquery悬停时增大/缩小图像？-Isthereawaytogrow/shrinkanimageonhoverusingJquery?

If you have your image positioned absolutely to the document in CSS, the rest of the page layout should not change when you animate your image.

如果您的图像完全位于CSS中的文档中,则在为图像设置动画时,页面布局的其余部分不应更改。

You should be able to use jQuery's animate() function. The code would look something like this:

你应该能够使用jQuery的animate()函数。代码看起来像这样:

$("#yourImage").hover(
    function(){$(this).animate({width: "400px", height:"400px"}, 1000);},        
    function(){$(this).animate({width: "200px", height:"200px"}, 1000);}
);

This example would grow the image with id=yourImage to 400px wide and tall when moused over, and bring it back to 200px wide and tall when the hover ends. That said, your issue lies more in HTML/CSS than it does jQuery.

这个例子会将id = yourImage的图像增大到400px宽和高,当鼠标悬停时,并在悬停结束时将其恢复到200px宽和高。也就是说,你的问题更多地出现在HTML / CSS中,而不是jQuery。

The grow and shrink operations are easy with .animate:

使用.animate可以轻松完成增长和缩小操作:

$("#imgId").click(function(){
  $(this).animate({ 
    width: newWidth,
    height: newHeight
  }, 3000 );
});

The problem is how to do this without changing the layout of your page. One way to do this is with a copy that is positioned absolutely over the content. Another might be to absolutely position the image inside a relative fixed size div - though IE might have problems with that.

问题是如何在不改变页面布局的情况下执行此操作。一种方法是使用完全位于内容上的副本。另一种可能是将图像绝对定位在相对固定大小的div内 - 尽管IE可能存在问题。

Here is an existing library that seems to do what you're asking http://justinfarmer.com/?p=14

这是一个现有的库,似乎做你要求的http://justinfarmer.com/?p=14

You could wrap the image in a div (or whatever html element you think is appropriate, li etc) with it's overflow set to hidden. Then use jQuery .animate to grow that div, in whatever way you like.

您可以将图像包装在div中(或者您认为合适的任何html元素,li等),并将其溢出设置为隐藏。然后使用jQuery .animate以你喜欢的方式增长div。

So for example the html could be

所以例如html可能是

Then your css would look like

然后你的CSS会是这样的

.grower {width:250px;height:250px;overflow:hidden;position:relative;}

So your image is essentially cropped by the div, which you can then grow on any event to reveal the full size of the image using jQuery

因此,您的图像基本上被div裁剪,然后您可以在任何事件上增长,以使用jQuery显示图像的完整大小

$('.grower').mouseover(function(){
  //moving the div left a bit is completely optional
  //but should have the effect of growing the image from the middle.
  $(this).stop().animate({"width": "300px","left":"-25px"}, 200,'easeInQuint');
}).mouseout(function(){ 
  $(this).stop().animate({"width": "250px","left":"0px"}, 200,'easeInQuint');
});;

NB: You may want to add in additional css into your js, like an increased z-index to your div so that it can grow over the layout etc

注意:您可能希望在js中添加额外的css,比如增加了对div的z-index,以便它可以在布局上增长等

Wanted to post a simple solution I'm using based on this post and information from Fox's answer to a related question.

希望发布一个简单的解决方案,我正在使用这个帖子和福克斯对相关问题的答案的信息。

Using an like this:

使用像这样的