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.
Ich habe diese kühle jQuery/Javascript/CSS Animationen zu viele erlebt. Es gibt keine einfache Lösung, von der ich weiß. – Fred