jq在webkit和gecko上运行良好，IE上有问题

自己写了一个JQ特效，鼠标移动到图片上以中心点为基准点放大图片，移开图片复原，图片放大缩小有过渡效果。
在webkit和gecko内核的浏览器上测试运行良好，在trident内核的浏览器上测试出现各种奇怪的现象。
IE8：图片过渡效果出现断裂；
IE9：图片放大缩小会跳动；
IE10：图片放大正常，缩小会向左上角跳一下；
360：放大缩小无过渡效果；
搜狗：同360；
我蛋都要裂了，求大神指点迷津
附上代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="zoomer.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $('ul.thumb li').Zoomer({speedView:80,speedRemove:80,altAnim:true,debug:false});
});
</script><link rel="stylesheet" type="text/css" href="zoomer.css" media="screen" /><title>Zoomer for jQuery</title>
<style type="text/css">
body { font: Arial, Helvetica, sans-serif normal 10px; margin: 0; padding: 0; }
* { margin: 0; padding: 0; }
#page { margin:0 auto; position:relative; width:850px; font-family:verdana; font-size:12px; }
#content { width:100%; }
pre { border:3px solid #ccc; padding:5px; font-size:12px; font-family:arial; }
.bold { font-weight:bold; }
.blue { color:blue; }
.red { color:red; }
</style>
</head>
<body>
  <div class="container">
    <ul class="thumb">
      <li><a href="#"><img src="image/ct.jpg"/></a></li>
      <li><a href="#"><img src="image/ct.jpg"/></a></li>
      <li><a href="#"><img src="image/ct.jpg"/></a></li>
      <li><a href="#"><img src="image/ct.jpg"/></a></li>
      <li><a href="#"><img src="image/ct.jpg"/></a></li>
      <li><a href="#"><img src="image/ct.jpg"/></a></li>
    </ul>
  </div>
</body>
</html>
ul.thumb {float: left;list-style: none;margin: 0; padding: 10px;width: 800px;}
ul.thumb li {margin: 0; padding: 5px;float: left;position: relative;width: 110px;height: 110px;}
ul.thumb li img {width: 100px; height: 100px;border: 0px solid #ddd;padding: 5px;position: absolute;left: 0; top: 0;-ms-interpolation-mode: bicubic; }
ul.thumb li img.hover {margin-top:15px;border: none;}
.title{position:absolute;width:185px;height:35px;margin:0;font-weight:900;padding:17px 0 0 0;text-align:center;}(function($){
$.fn.Zoomer=function(b)
{
var c=$.extend({speedView:50,speedRemove:50,altAnim:false,debug:false},b);
var d=$.extend(c,b);
function e(s)
{
if(typeof console!="undefined"&&typeof console.debug!="undefined"){
console.log(s)}
else
{
alert(s)
}
}
if(d.speedView==undefined||d.speedRemove==undefined||d.altAnim==undefined)
{
e('speedView: '+d.speedView);
e('speedRemove: '+d.speedRemove);
e('altAnim: '+d.altAnim);
return false
}
if(d.debug==undefined)
{
e('speedView: '+d.speedView);
e('speedRemove: '+d.speedRemove);
e('altAnim: '+d.altAnim);
return false
}
if(typeof d.speedView!="undefined"||typeof d.speedRemove!="undefined"||typeof d.altAnim!="undefined")
{
if(d.debug==true)
{
e('speedView: '+d.speedView);
e('speedRemove: '+d.speedRemove);
e('altAnim: '+d.altAnim);
}
$(this).hover(function()
{
$(this).css({'z-index':'10'});
$(this).find('img').stop().animate({marginTop:'-85px',marginLeft:'-85px',top:'50%',left:'50%',width:'120px',height:'124px',padding:'20px'},d.speedView);
if(d.altAnim==true){var a=$(this).find("img").attr("alt");
}
},function()
{
$(this).css({'z-index':'0'});
$(this).find('img').stop().animate({marginTop:'0',marginLeft:'0',top:'0',left:'0',width:'100px',height:'100px',padding:'5px'},d.speedRemove);})
}
}
})(jQuery);

解决方案 »

  1.   

    (function($){
        $.fn.extend({Zoomer:
        function(b)
        {
            var c=$.extend({speedView:50,speedRemove:50,altAnim:false,debug:false},b);
            var d=$.extend(c,b);
            function e(s)
            {
                if(typeof console!="undefined"&&typeof console.debug!="undefined"){
                console.log(s)}
                else
                {
                    alert(s)
                }
            }
            if(d.speedView==undefined||d.speedRemove==undefined||d.altAnim==undefined)
            {
                e('speedView: '+d.speedView);
                e('speedRemove: '+d.speedRemove);
                e('altAnim: '+d.altAnim);
                return false
            }
            if(d.debug==undefined)
            {
                e('speedView: '+d.speedView);
                e('speedRemove: '+d.speedRemove);
                e('altAnim: '+d.altAnim);
                return false
            }
            if(typeof d.speedView!="undefined"||typeof d.speedRemove!="undefined"||typeof d.altAnim!="undefined")
            {
                if(d.debug==true)
                {
                    e('speedView: '+d.speedView);
                    e('speedRemove: '+d.speedRemove);
                    e('altAnim: '+d.altAnim);
                }
                $(this).hover(function()
                {
                    $(this).css({'z-index':'10'});
                    $(this).find('img').stop().animate({marginTop:'-85px',marginLeft:'-85px',top:'50%',left:'50%',width:'120px',height:'124px',padding:'20px'},d.speedView);
                    if(d.altAnim==true){var a=$(this).find("img").attr("alt");
                }
            },function()
            {
                $(this).css({'z-index':'0'});
                $(this).find('img').stop().animate({marginTop:'0',marginLeft:'0',top:'0',left:'0',width:'100px',height:'100px',padding:'5px'},d.speedRemove);})
            }
        }
    });
    })(jQuery);
      

  2.   

    操蛋的万恶的IE~建议LZ用一个测试页面做简单的测试，也就是只有一个图形对象，使用jQuery的animate，分开测试放大、移动、定位的动画效果你的js代码可能过于耗费性能了，你知道的，IE中javascript的执行效率是远低于chrome\firefox的