[英]How do I change the size of an individual image with jquery on rollover?
I have an effect at http://www.lightsandfire.com that is done with css transitions but it doesnt work in IE, how do I create the same effect in jquery? 我在http://www.lightsandfire.com上使用CSS转换完成了效果,但在IE中不起作用,如何在jquery中创建相同的效果? I would like to be able to rollover an image and have the image grow in size above the flow of the document.
我希望能够将图像翻转并使图像的尺寸超出文档流。 I would like to change the size of an image proportionally when I roll over it with a mouse.
当我用鼠标滑过图像时,我想按比例更改图像的大小。 If the image increased in size 100% that would be what I am looking for.
如果图像尺寸增加100%,那将是我想要的。
Any help would be appreciated. 任何帮助,将不胜感激。
You need to use animate, and animate the width and height. 您需要使用动画,并对宽度和高度进行动画处理。 Animating of height and width is cross-browsers compatible.
高度和宽度的动画与跨浏览器兼容。
To animate an object on hover: 要在悬停时为对象设置动画:
$('.item').hover(function() {//Hovering
$(this).animate({
width: '400px',
height: '400px',
marginLeft: '-200px',
marginTop: '-200px'
}, 400);//Speed of animation in ms
}, function() { //Not hovering
$(this).animate({
width: '200px',
height: '200px',
marginLeft: '-100px',
marginTop: '-100px'
}, 400);
});
To make it on click, just change the hover to mouseDown. 要使其单击,只需将鼠标悬停更改为mouseDown。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.