2

お客様のご要望でjQueryを使ってイントロアニメーションを作成しています。このコードは、div がアニメーションではなく最終位置にジャンプする IE8 と Safari (PC) を除くほとんどのブラウザーで機能します。私はこれを数日間続けています：http://jsfiddle.net/evolve/5g2FQ/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>

<style type="text/css">
body, html {margin: 0;}
#navigation-next-top {background: red; position: absolute; width: 20px; height: 20px; top:   40px; right: 0; bottom: 0; left: 0; margin: auto;}
#navigation-next-right {background: orange; position: absolute; width: 20px; height: 20px; top: 0; right: 40px; bottom: 0; left: 0; margin: auto;}
#navigation-next-bottom {background: yellow; position: absolute; width: 20px; height: 20px; top: 0; right: 0; bottom: 40px; left: 0; margin: auto;}
#navigation-next-left {background: green; position: absolute; width: 20px; height: 20px; top: 0; right: 0; bottom: 0; left: 40px; margin: auto;}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $(".logo").click(function(){
        $("#navigation-next-top").animate({"top": "40px", "marginTop": "0"}, 2000);
        $("#navigation-next-right").animate({"right": "40px", "marginRight": "0"}, 2000);
        $("#navigation-next-bottom").animate({"bottom": "40px", "marginBottom": "0"}, 2000);
        $("#navigation-next-left").animate({"left": "40px", "marginLeft": "0"}, 2000);
    });
});
</script>

</head>
<body>

<div id="navigation-next-top" class="logo"></div>
<div id="navigation-next-right" class="logo"></div>
<div id="navigation-next-bottom" class="logo"></div>
<div id="navigation-next-left" class="logo"></div>

</body>
</html>

多くのことを試しましたが、margin: auto; を変更すると表示されます。200px のような値にすると、アニメーションは正常に動作しますが、margin: auto; そもそも私のdivを中央に配置するのは何ですか。

% を使用してみましたが、これはレスポンシブである必要があり、% は一部のブラウザーで位置合わせの問題を引き起こします。

jQuery 2 を使用すると IE8 で JS エラーが発生するため、1.9.1 で解決しました。

これをすべてのブラウザーで最初から最後までアニメーション化するだけです。

4

1 に答える 1

1

次のマークアップを使用してください -

CSS

* { margin:0; padding:0 } /* use css reset instead of using * */
html, body { height:100%; width:100% }
.box { width:20px; height:20px; position:absolute; left:50%; top:50%; margin-left:-20px; margin-top:-20px }

.top { background-color:#09C; margin-top:-40px }
.right { background-color:#C66; margin-left:0px  }
.bottom { background-color:#936; margin-top:0px  }
.left { background-color:#000; margin-left:-40px  }

HTML

<div class="box top"></div>
<div class="box right"></div>
<div class="box bottom"></div>
<div class="box left"></div>

JS

$(document).ready(function(){
    var timing = 2000;

    $('.box').click(function(){
        $('.top').animate({ top: '100%' }, timing); 
        $('.bottom').animate({ top: '20px' }, timing);
        $('.left').animate({ left: '100%' }, timing);
        $('.right').animate({ left: '20px' }, timing);  
    }); 
});

この jsFiddle を参照してください - http://jsfiddle.net/rsAGv/

于 2013-05-23T08:49:13.017 に答える