有没有办法在使用Jqueryhover时增大/缩小图像？
有没有办法，使用Jquery增长然后缩小图像（动画使其看起来很光滑）hover而不会过多地影响布局（我假设填充必须缩小然后再增长）。
随着一些麻烦，我终于想出了解决方案，感谢所有帮助过的人。
.growImage {position:relative;width:80%;left:15px;top:15px} .growDiv { left: 100px; top: 100px;width:150px;height:150px;position:relative } 
$(document).ready(function(){ $('.growImage').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": "100%","left":"0px","top":"0px"}, 400,'swing'); }).mouseout(function(){ $(this).stop().animate({"width": "80%","left":"15px","top":"15px"}, 200,'swing'); });; }); 如果您的图像完全位于CSS中的文档中，则在为图像设置动画时，页面布局的其余部分不应更改。
你应该能够使用jQuery的animate（）函数。 代码看起来像这样：
$("#yourImage").hover( function(){$(this).animate({width: 400px, height:400px}, 1000);}, function(){$(this).animate({width: 200px, height:200px}, 1000);} );
这个例子会将id = yourImage的图像增加到400px宽和高的moused，并在hover结束时将其恢复到200px宽和高。 也就是说，你的问题更多地出现在HTML / CSS中，而不是jQuery。
使用.animate可以轻松完成增长和缩小操作：
$("#imgId").click(function(){ $(this).animate({ width: newWidth, height: newHeight }, 3000 ); });
问题是如何在不改变页面布局的情况下执行此操作。 一种方法是使用完全位于内容上的副本。 另一种可能是将图像绝对定位在相对固定大小的div内 – 尽管IE可能存在问题。
这是一个现有的库，似乎做你要求的http://justinfarmer.com/?p=14
您可以将图像包装在div中（或者您认为合适的任何html元素，li等），并将其溢出设置为隐藏。 然后使用jQuery .animate以你喜欢的方式增长div。
所以例如html可能是
然后你的CSS会是这样的
.grower {width:250px;height:250px;overflow:hidden;position:relative;}
因此，您的图像基本上被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'); });;
注意：您可能希望在js中添加额外的css，比如增加了对div的z-index，以便它可以在布局上增长等
希望发布一个简单的解决方案，我正在使用这个post和福克斯对相关问题的答案的信息。
使用像这样的
你可以做类似于下面的事情。 它将采用图像的当前宽度+高度，使其在hover（ current * 3 ）时大3倍，然后在鼠标移出时将其恢复。
var current_h = null; var current_w = null; $('.resize').hover( function(){ current_h = $(this, 'img')[0].height; current_w = $(this, 'img')[0].width; $(this).animate({width: (current_w * 3), height: (current_h * 3)}, 300); }, function(){ $(this).animate({width: current_w + 'px', height: current_h + 'px'}, 300); } );
current_X变量是全局变量，因此可以在鼠标移出操作中访问它们。
难道你不能使用jQuery的动画实现它吗？ 稍微修补一下，应该是一瞬间。
如果你的意思是“不影响布局”，你需要更多地关注CSS而不是javascript。
javascript involoved已经在这里发布了bean …但是为了确保你的布局没有被破坏，你需要从布局的流程中删除你的图像。
这可以通过绝对定位，并将其z-index设置为更大的值来完成。 但是，这并不总是最干净的解决方案…所以我建议你在父DOM元素中使用“position：relative”，在图像的样式中使用“position：absolute”。
相对和绝对的相互作用非常有趣。 你应该谷歌了。
欢呼，jrh
– HTML
– JS
$( ".container" ).toggle({ effect: "scale", persent: 80 });