开发者

IE: matrix transformations via jquery and css

开发者 https://www.devze.com 2023-01-23 18:34 出处:网络
I\'m applying some nifty but basic animation to divs and graphics via jquery and using the 2d transform plug-in to do it which is supposed to be accessing the Matrix filter of IE to accomplish what ot

I'm applying some nifty but basic animation to divs and graphics via jquery and using the 2d transform plug-in to do it which is supposed to be accessing the Matrix filter of IE to accomplish what other browsers do naturally. My issue is that after an animation call, the previous css set via a stylesheet OR implicitly set via jquery/javascript is ignored once the matrix filter has been manipulated.

The IE developer bar reveals this line on the image in the dev screen after completing an animation:

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

(that top:0 and left:0 should say left:91px; and top:-9px; like it does in FF and Safari)

my jquery just before this is:

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');
  }
 )};

So the problem, only in IE, is that the position of: left:'+=70' and top:'-=25' is not starting from the css placement of top:17px; and left:10px; set via a stylesheet and ending up at the left:91px and top:-9px;.

The element has layout, it is positioned (tried both relative and absolute) and I've tried using the !important declaration on the top and left but to no success.

I see that the transform is applied as an inline style with the other Developer tools of iE8 so I'm trying to figure out how to tell IE.... put this element here, and animate from that placement"

I can't seem to figure out how to set the css positioning so that IE will play nicely with the animations.


You might want to take a look at the IE Transform Translator.


maybe Dx Dy help http://msdn.microsoft.com/en-us/library/ms533014(VS.85,loband).aspx

0

精彩评论

暂无评论...
验证码 换一张
取 消