2010-11-23 3 views
2

Ich wollte einigen unserer Designer ein schnelles Modell einer Animation in jQuery zeigen, insbesondere eines, das den Eindruck erweckt, als würde sich ein Objekt unter einem anderen bewegen .jQuery-Animationen verhalten sich in Chrome/Safari falsch, wenn der Benutzer hinein- oder herauszoomt

Das Beispiel, das ich eingerichtet habe, hat eine $ 100 Rechnung, die sich unter einem transparenten Papier mit einem herausgerissenen Loch bewegt. Beide Elemente sind mit absoluter Positionierung eingerichtet, und das Papier .png hat einen höheren Z-Index.

Alles schien gut zu funktionieren, aber ich bemerkte auf Chrome und Safari, dass das Zoomen hinein oder heraus die Positionierung wegwirft.

ich das Beispiel hier gepostet habe:

http://tdm-analytics.com/js/examples/example-1.html

Sie werden bemerken, dass, wenn Sie in oder out und erfrischen vergrößern, die vertikale Positionierung ausgeschaltet ist.

Der Code ist hier:

<!DOCTYPE html> 
<head> 
    <script type="text/javascript" src="http://tdm-analytics.com/js/examples/jquery-1.4.4.js"></script> 
    <script> 
     $(document).ready(function() { 
      $("#100").animate({"top":"-=610px"}, 3000); 
     }); 
    </script> 
</head> 
<body> 
    <div id="envelope" style="position:absolute;margin-right:-195px;right:50%;top:200px;z-index:9999;"> 
     <img src="http://tdm-analytics.com/js/examples/bkhtornframe.png" /> 
    </div> 
    <div id="100" style="position:absolute;margin-right:-190px;right:50%;top:630px;z-index:1;"> 
     <img src="http://tdm-analytics.com/js/examples/100-dollar-bill.jpg" /> 
    </div> 
</body> 
</html> 

Nicht sicher, ob dies etwas ist, ich habe falsch oder ein jQuery-Problem erledigt. Wenn jemand eine Lösung kennt, wäre ich sehr dankbar für die Hilfe.

+0

Ich habe diese kühle jQuery/Javascript/CSS Animationen zu viele erlebt. Es gibt keine einfache Lösung, von der ich weiß. – Fred

Antwort

0

Ich konnte kein Problem mit der Animation in Chrom sehen. Habe Safari nicht probiert, da es genauso gut wie Chrome Web-Kit ist.

Oder beziehen Sie sich auf die Browser-Bildlaufleiste, die beim Zoomen auf bestimmten Bildschirmauflösungen angezeigt wird?

+0

Wenn Sie die Ansicht vergrößern oder verkleinern und aktualisieren, wird die vertikale Positionierung aufgehoben. – damzam

1

die Ränder Verwenden Sie zum Beispiel margin_left horizontal zu animieren, was funktioniert, wenn Chrom/Safari [und andere] in gezoomt werden.