jQuery：如何平滑动画图像大小调整

Posted 2023-05-08

【中文标题】jQuery：如何平滑动画图像大小调整

【英文标题】：jQuery: How to smooth animated image resizing

【发布时间】：2011-02-19 02:57:25

【问题描述】：

我是一个 jQuery 菜鸟 - 所以请原谅这个问题可能很基础。

我正在做一些非常简单的事情 - 在悬停时为图像的位置和大小设置动画。当您将鼠标悬停在图像上时，会出现一些明显的“锯齿”（在 FF、chrome、safari 和其他糟糕的浏览器中）——有没有办法摆脱这种情况？ jquery 代码如下，这里有一个实时链接kristechdev.metropoliscreative.com（将鼠标悬停在图标上）。

<script type="text/javascript"> 

   $(document).ready(function() 

    $('#zoomNav li img').hoverIntent(

     function() 

      $(this).animate('margin-top' :'-35px', 'margin-left' :'-10px', 'height' :'95px','width' : '79px' , 
            'fast');
     , 

     function() 

      $(this).animate('margin-top' : '0px', 'margin-left' :'0px', 'height' :'70px','width' : '58px' , 
            'fast');
    );    
   );



</script>

【问题讨论】：

刚刚检查了你的链接，我的浏览器中的动画很流畅。我没有发现问题。

哈哈...也许我只是疯了... :)

【参考方案1】：

如果问题出在哪里，可能需要在 IE 中 enable interpolation on images。

【讨论】：

问题发生在 FF、safari、chrome 中 - 没有检查过歌剧但谁使用它？ :) - 谢谢！

@nikibrown - 查看统计信息...w3schools.com/browsers/browsers_stats.asp 一些仍在使用歌剧...

编辑一位朋友在慢速模式下对动画进行了快速截屏（见 30 秒标记）看到锯齿了吗？ duzodesign.com/junk/kristech/kristech.htm跨度>