jQuery Forum

I'm using the Transform2d plugin. My issue is that I'm getting a 'jump' after an 
animation is completed and css is being ignored.

All divs that are being animated are set to Relative and positioned with 
margin-left/margin-top as starting points in the css file.

After using alerts to get values, both IE and Firefox ignore the initial 
css set to calculate distance from.

So, though in the jquery I say:
$('#cs_zoomGhost').animate({
 marginLeft:'90',
 marginTop:'20'
},500);

for instance, the div "cs_zoomGhost" ends up alerting different numbers 
other than, in this case, 90/20, and has an annoying "jump" up of about 
10 pixels when the movement is completed.

I've tried "+=70", to add to other than set as well as specifying pixels 
like "90px" but the only thing that works in IE is to set the position 
to absolute but then it doesn't work in FF or Safari and other compliant browsers.

css:

1. #cs_zoomGhost{
2. position:relative;
3. margin-top:16px;
4. margin-left:20px;
5. width:145px;
6. height:170px;
7. z-index:6;
8. }

html for area:

1. <div id="cs_aniFocus">
2. <div id="cs_stage2ArrowGrow">
3. <img src="images/zoomFake.gif" id="arrowGrow" alt=""></div>
4. 
   
5. <div id="cs_zoomGhost">
6. <img src="images/zoomFake.gif" width="145" height="170" alt="moneyBag" id="cs_moneyBag"></div>
7. 
   
8. <div id="cs_stage3HiddenPie">
9. <img src="images/zoomFake.gif" id="pieChart" alt="pieChart"></div>
10. 
    
11. <div id="cs_5btnPrevNext">
12. <a href="#"><img src="images/prevArrow2.gif" border=0 width="19" height="20" id="prevBtn" alt=""></a> <img src="images/state1_4stage.gif" name="stateGraphic" id="stateGraphic" alt="animatedArrow"><a href="#"><img src="images/nextArrow2.gif" border=0 width="19" height="20" hspace="2" id="nextBtn" alt="nextButtonArrow"></a> </div>
13. </div>

jquery upon a click:

1. function stage2() {
2. $("#cs_content2ClipStage3").animate({marginLeft:-330},200, function() {
3. $('#cs_zoomGhost').animate({
4. scale:.56,
5. marginLeft:'90px',
6. marginTop:'5px'
7. },500, function() {
8. //replaceZoom technique for piechart
9. $("#cs_stage3HiddenPie").animate({scale:0},500, function() {
10. $('#pieChart').attr('src','images/pieChart2.gif');
11. $('#cs_stage3HiddenPie').animate({scale:.75}, 200);
12. $('#cs_stage3HiddenPie').css('marginLeft', '0');
13. $('#cs_stage3HiddenPie').css('marginTop', '30');
14. });
15. $('#cs_stage3HiddenPie').show();
16. $('#cs_stage2ArrowGrow').show();
17. alert($('#cs_zoomGhost').css('marginTop'));
18. $('#cs_stage3HiddenPie').animate({scale:.8}, 500, function() {
19. $('#arrowGrow').attr('src','images/arrowGrow2.gif');
20. });
21. });
22. $("#stateGraphic").attr('src', 'images/state2_4stage.gif');
23. }
24. )};

 
 Also, using 2d because I want scaling from the center up/down and out not 
from top left and the idea of using a bigger div at size of eventual graphic 
to 'fake' center scaling isn't too appealing right now.
 
Finally, we have tight security around here and I've no access to a 
public server to put this on