javascript 使用 Jquery .animation 平滑图像调整大小和缩放
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19676984/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Smooth image resize Using Jquery .animation, and scale
提问by nope
Basically I am attempting to create a smooth animation. When .mouseenter is triggered the image will expand to twice it's size and when .mouseleave is triggered the image will smoothly transition to it's original size.
基本上我试图创建一个流畅的动画。当 .mouseenter 被触发时，图像将扩大到两倍大小，当 .mouseleave 被触发时，图像将平滑过渡到它的原始大小。
I have already achieved this using CSS and .addclass and .remove class, but for the purpose of this skill building excersize I am going back and rewriting it in stock jquery. I have not written the .mouseleave function yet as I couldnt figure out the .mouseenter
我已经使用 CSS 和 .addclass 和 .remove 类实现了这一点，但是为了建立这种技能的目的，我将返回并在股票 jquery 中重写它。我还没有编写 .mouseleave 函数，因为我无法弄清楚 .mouseenter
But I am clearly writing the .mouseenter event wrong.
但我显然写错了 .mouseenter 事件。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link href="stylesheets/960_12_col.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<style>
body {
font-size:62.5%;
background:url('images/vintageocean.jpg')no-repeat repeat center fixed;
}
#gallery {
padding-top:10em;
}
.first_row {
margin-bottom:15em;
}
</style>
<script>
$(document).ready(function() {
$(".image").css({width : '20em', height : '20em'});
$("image").mouseenter(function() {
$(this).stop().animate({transform, scale(2)}, 3000);
});
});
</script>
</head>
<body>
<div id="wrapper" class="container_12">
<section id="gallery">
<img id="avery" class=" image first_row prefix_2 grid_3 suffix_1" src='images/OAI.jpg' alt= "On Avery Island Album Art">
<img id="overthesea" class=" image first_row prefix_1 grid_3 suffix_2" src='images/ITAOTS.jpg' alt="In the Aeroplane Over the Sea album art">
<img id="beauty" class=" image second_row prefix_2 grid_3 suffix_1" src='images/beauty.jpg' alt="Beauty Demo Album Art">
<img id="everthingIs" class=" image second_row prefix_1 grid_3 suffix_2" src='images/everythingis.jpg' alt="Eveything Is EP Album Art">
</section>
</div>
</body>
回答by Daniel Perván
There are a few things that are wrong with your code. First of all, you are binding your mouseenter event on all tagsnamed imageand not the class (change it to $('.image')).
您的代码有一些错误。首先，您将 mouseenter 事件绑定到所有命名的标签image而不是类（将其更改为$('.image')）。
Secondly, your object that you feed into your animate function must be in the form key:value and the values must be primitive types, thus you need to change your animation to
其次，您提供给动画函数的对象必须采用 key:value 形式，并且值必须是原始类型，因此您需要将动画更改为
$(this).stop().animate({transform:'scale(2)'}, 3000);
in order to make it valid javascript.
为了使它有效的javascript。
However, in this case it will still not work, since animate only supports numerical values, why animating transforms simply doesn't work. There might be some jQuery plugins that solve this, but I'm sadly unaware of anything like that.
但是，在这种情况下它仍然不起作用，因为 animate 仅支持数值，为什么动画转换根本不起作用。可能有一些 jQuery 插件可以解决这个问题，但遗憾的是我不知道这样的事情。
While I have seen some hacks where you animate some arbitrary attribute and then manually change the transform with an anonymous function, but frankly I think it's the wrong way to go and unnecessarily complex for something that can easily be done with CSS.
虽然我已经看到一些技巧，您可以为某些任意属性设置动画，然后使用匿名函数手动更改转换，但坦率地说，我认为这是错误的方法，并且对于使用 CSS 可以轻松完成的事情来说是不必要的复杂。
