jquery - 即 : matrix transformations via jquery and css

Question

我正在通过 jquery 将一些漂亮但基本的动画应用于 div 和图形，并使用 2d 转换插件来执行此操作，这应该访问 IE 的 Matrix 过滤器以完成其他浏览器自然执行的操作。我的问题是，在动画调用之后，一旦矩阵过滤器被操纵，之前通过样式表设置或通过 jquery/javascript 隐式设置的 css 将被忽略。

完成动画后，IE 开发人员栏会在开发屏幕的图像上显示此行:

progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22=1, sizingMethod='auto expand'); ZOOM: 1; TOP: 0px; LEFT: 0px

(top:0 和 left:0 应该是 left:91px; 和 top:-9px; 就像在 FF 和 Safari 中一样)

在此之前我的 jquery 是:

function stage2() {
  $("#cs_content2ClipStage3").animate({left:-355},200, function() {
  $('#cs_zoomGhost').animate({
   scale:.56,
   left:'+=70',
   top:'-=25'},500, function() {
        //replaceZoom technique for piechart
        $("#cs_stage3HiddenPie").animate({scale:0},500, function() {
        $('#pieChart').attr('src','images/pieChart2.gif');
        $('#cs_stage3HiddenPie').animate({scale:.75}, 200);});

  $('#cs_stage3HiddenPie').show();
     $('#cs_stage2ArrowGrow').show();
  $('#cs_stage3HiddenPie').animate({scale:.8}, 500, function() {
  $('#arrowGrow').attr('src','images/arrowGrow2.gif');
    });
  });
  $("#stateGraphic").attr('src', 'images/state2_4stage.gif');
  }
 )};

所以只有在 IE 中的问题是:left:'+=70' 和 top:'-=25' 的位置不是从top:17px; 和 left:10px; 的 css 位置通过样式表设置并在 left:91px 和 结束top:-9px;.

该元素有布局，它被定位(尝试相对和绝对)，我尝试在顶部和左侧使用 !important 声明但没有成功。

我看到转换是作为内联样式应用到 iE8 的其他开发人员工具中的，所以我想弄清楚如何告诉 IE .... 把这个元素放在这里，然后从那个位置制作动画“

我似乎无法弄清楚如何设置 css 定位，以便 IE 可以很好地播放动画。

Answer 1

您可能想看一下 IE Transform Translator .