これが簡単test.htmlです:
<!-- css -->
<style type="text/css">
#convert-exec {
width:300px;
margin-left:auto;
margin-right:auto;
}
</style>
<!-- js -->
<script type="text/javascript" src="inc/js/lib/jquery.js"></script>
<script type="text/javascript" src="inc/js/lib/jquery-ui.js"></script>
<script type="text/javascript" src="inc/js/lib/jcarousel.js"></script>
<script type="text/javascript" src="inc/js/lib/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$( document ).click(function() {
$('#convert-exec').animate({
"float":"left",
"margin-left":"0",
"margin-right":"20px"
}, 500, "easeOutQuart", function() {
});
});
</script>
<!-- body -->
<body>
<div id="convert-exec">
<p>123</p>
</div>
</body>
これは でうまく機能しchromeます。
FireFoxまたはでテストすると、Safariアニメーション効果はありません。具体的には、 #convert-exec を "float":"left" , "margin-left":"0" , "margin-right":" に変更します。 20px"すぐに!
でテストするとIE、「float」:"left"、"margin-left":"0"、"margin-right":"20px" は、Web ページをクリックする前に開いたときに既に設定されています。
を使っていますjquery 1.10.2 chrome 30.0.1599.101, firefox 22, IE 8,safari 5.1.7誰か助けてくれませんか? どうもありがとう!
PS
デモ リンク: jsfiddle、私は jquery を初めて使用するため、IE だけでなく Firefox でも効果を再現する方法がわかりませんjsfiddle。