IE中的jQuery旋转+动画答案

【问题标题】：JQuery rotate + animation in IEIE中的jQuery旋转+动画
【发布时间】：2013-04-30 07:23:57
【问题描述】：

我想在悬停时旋转和放大图片（平滑）。我正在使用 JqueryRotate 旋转图片并使用 .animate() 进行放大。我得到以下代码：

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script src="scripts/jQueryRotateCompressed.2.2.js"></script>
<script type="text/javascript">

$(document).ready(function(){
    $("#test").hover(
    function(){
        $(this).rotate({animateTo:30})
        $(this).stop().animate({width:'90px',height:'90px'}, 500 );



    },
    function(){
        $(this).rotate({animateTo:0})
        $(this).stop().animate({width:'34px',height:'34px'}, 500);


}); 
});
</script>

----->我的头代码

<body>
<img id="test" src="images/facebook.png" />
</body>

现在这在 Firefox、Chrome 和 Safari 中完美运行......但当然 IE 是一个皮塔饼。我现在正在 IE8 上进行测试，它确实会旋转，但由于某种原因它不会放大.. 如果我在没有旋转的情况下测试功能，它会放大就好了......所以这是 2 的组合在 IE8 中不起作用.有人知道解决方案吗？谢谢

【问题讨论】：

如果您正在为包含图像的 div 设置动画，请尝试在 css 中将图像宽度/高度设置为 100%，以使其适合 div。
这不是问题，它在所有浏览器中都可以正常工作，但在 IE 中它只是旋转，但不会放大...查看我的工作示例，这样你就知道我的意思了：jsfiddle.net/Xn2ep

标签： jquery rotation jquery-animate

【解决方案1】：

您使用的插件版本，即 jQuery rotate 的 2.2 版本与 IE8 存在错误。

请试用 3.0 版本的插件，它可以工作(click here to download)，但与调整图像大小一起使用时会出现错误。

这是因为插件将图像放置在画布中，然后旋转画布。当你试图增加图片的大小时，实际上是增加了画布的大小，从而增加了.hover()函数的适用区域。

在您自己的网站上进行测试，以在 IE8 上查看外星人和不明飞行物。

我的建议：如果要旋转图像，请不要调整其大小。这两个就像猫和狗一样。

【讨论】：

感谢您的评论。我刚刚在 IE8 中对其进行了测试，我得到了一个错误的动画:)。像这样简单的事情无法在 IE 中工作真是太奇怪了。我想我得再创作一个动画了。