J'applique une animation astucieuse mais basique à divs et graphiques via jquery et en utilisant le plug-in de transformation 2d pour le faire qui est censé accéder au filtre Matrix de IE pour accomplir ce que les autres navigateurs font naturellement. Mon problème est qu'après un appel d'animation, le précédent jeu de css via une feuille de style OU implicitement réglé via jquery/javascript est ignoré une fois que le filtre de la matrice a été manipulé.IE: transformations matricielles via jquery et css
La barre de développeur IE révèle cette ligne sur l'image dans l'écran dev après avoir terminé une animation:
progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22=1, sizingMethod='auto expand'); ZOOM: 1; TOP: 0px; LEFT: 0px
(qui top:0 et left:0 devrait dire left:91px; et top:-9px; comme il le fait dans FF et Safari)
mon jquery juste avant que ce soit:
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');
}
)};
le problème, que dans IE, est que la position de: left:'+=70' et top:'-=25' ne commence pas à partir du placement css de top:17px; et left:10px; fixé par l'intermédiaire d'une feuille de style et se terminant au left:91px et top:-9px;.
L'élément a la disposition, il est positionné (essayé à la fois relatif et absolu) et j'ai essayé d'utiliser la déclaration !important en haut et à gauche mais sans succès.
Je vois que la transformation est appliquée en tant que style en ligne avec les autres outils de développement de iE8 donc j'essaie de comprendre comment dire IE .... mettre cet élément ici, et animer à partir de ce placement "
Je ne peux pas sembler comprendre comment définir le positionnement css pour que IE va jouer bien avec les animations.