基本上，我正在尝试创建平滑的动画。触发.mouseenter时，图像将扩大到其大小的两倍；触发.mouseleave时，图像将平滑过渡到其原始大小。
我已经使用CSS和.addclass和.remove类实现了此目的，但是出于这种技能构建的目的，我将回过头来将其重写为stock jquery。我还没有编写.mouseleave函数，因为我找不到.mouseenter
但是我显然把.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>
您的代码有些错误。首先，您将mouseenter事件绑定到所有命名的标签image而不是类上（将其更改为$('.image')）。
其次，要输入到动画函数中的对象必须采用key：value的形式，并且值必须是原始类型，因此需要将动画更改为
$(this).stop().animate({transform:'scale(2)'}, 3000);
为了使其有效的JavaScript。
但是，在这种情况下它仍然不起作用，因为动画仅支持数值，所以为什么对动画进行动画处理根本不起作用。可能有一些jQuery插件可以解决此问题，但令人遗憾的是我没有意识到类似的事情。
虽然我看到了一些技巧，它们可以为任意属性设置动画，然后使用匿名函数手动更改转换，但是坦率地说，我认为这是错误的方法，并且不必要复杂，而这些问题可以通过CSS轻松完成。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句