non riesco a capire perchè per qualche strano motivo non riesco ad ottenere lo stesso effetto che ottengo su IE con questo codice.

non mi sembra niente di complicato ma non ne vengo fuori...
Codice PHP:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" dir="ltr"> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=windows-1250"/> 

<script src="http://code.jquery.com/jquery-latest.js"></script> 
<script type="text/javascript"> 
<!-- 
  $(document).ready(function(){ 
    // Using multiple unit types within one animation. 
    $("#frameI").focus(function(){ 
      $("body").animate({ 
        opacity:".2"},500); 
      $("#test").animate({ 
        marginLeft: "-30px", 
        opacity:"1" 
      }, 500 ); 
      $("#frameI").animate({ 
        width: "630px", 
        marginLeft: "-20px", 
        marginRight:"-24px", 
        opacity:"1" 
      }, 500 ); 
    $("body").click(function(){ 
      $("#test").animate({ 
        width: "300px", 
        marginLeft: "110px" 
      }, 500 ); 
      $("#frameI").animate({ 
        width: "312px", 
        marginLeft: "-35px", 
        marginTop:"-50px", 
        marginBottom:"-4px" 
      }, 500 ); 
      $("body").animate({ 
        opacity:"1"},500); 
    }); 
    }); 
  }); 


--> 
</script> 
</head> 
<body> 
<div id="cont"> 
<div id="test"  style="position:absolute;height: 350px; text-align: center; margin-left:110px;border:1px solid #cd0000;" > 
<iframe id="frameI" src="http://www.w3c.org" frameborder="0" framespacing="0" width="312" height="410" scrolling="no" style="margin-left:-15px;margin-top:-50px; margin-bottom:-4px;"></iframe> 
</div> 
<div id="vuoto" style="height:380px;"></div> 
</div> 
</body> 
</html> 
Grazie in anticipo a chi mi aiuta

p.s.: lasciate stare gli stili in linea e le dimensioni, sono cose temporanee di prova