jQeryのanimate()でmarginを指定するときは、4方向個別にした方が良いみたい
IE 対策をしているときに気付いたことをメモしておきます。
例えば
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
でjQueryを呼び出し、スタイルを
.test20111121 {
margin:10px 0;
padding:10px;
border:1px solid #000;
background:#eee;
}
.test20111121 ul {
margin:0;
padding:0;
}
.test20111121 li {
list-style-type:none;
float:left;
width:50px;
height:50px;
border:1px solid #f00;
background:#fee;
margin:10px;
}
.test20111121 .clear {
clear:both;
}
とした上で、次のような構造の html があるとします。
<div class="test20111121"> <input type="button" id="wide_css1" value="ゆったり" /> <input type="button" id="narrow_css1" value="窮屈" /> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <div class="clear"></div> </div>
このとき、このようなスクリプト↓を動かしてみると、
$("#wide_css1").click(function(){
$(this).parent().find("li").css("margin","15px");
});
$("#narrow_css1").click(function(){
$(this).parent().find("li").css("margin","1px");
});
結果はこうなります（例１）。ボタンをクリックすると、正方形の間隔が 30px か 2px かに変化します。
例１
これは、どのブラウザで見ても同じ挙動をするはずです。
次に、これを滑らかに変化させようと、次のようにスクリプトを書き換えました（説明の都合上、ボタンの id を変えています）。
$("#wide_anime1").click(function(){
$(this).parent().find("li").animate({margin:"15px"},500);
});
$("#narrow_anime1").click(function(){
$(this).parent().find("li").animate({margin:"1px"},500);
});
その結果が（例２）ですが、Firefox, Safari, Chrome では、一旦 margin が 0 になってから、指定した間隔になります。Opera や IE 等とは異なります。
例２
これを解決すべく試行錯誤の結果、４方向（上右下左）の一括指定ではなく、次のように個別に margin の値を与えてやると、
$("#wide_anime2").click(function(){
$(this).parent().find("li").animate({
marginTop:"15px",
marginRight:"15px",
marginBottom:"15px",
marginLeft:"15px"
},500);
});
$("#narrow_anime2").click(function(){
$(this).parent().find("li").animate({
marginTop:"1px",
marginRight:"1px",
marginBottom:"1px",
marginLeft:"1px"
},500);
});
このようにすべてのブラウザで同じように見えるようになりました（例３）（たぶんそのはず）。
例３
ところでさっき（例２）、４方向の一括指定でも Opera や IE ではキレイに動きましたが、もともとのスタイルを
.test20111121 li.test1 {
margin:10px 10px 10px 10px;
}
という風にして、
$("#wide_anime3").live("click",function(){
$(this).parent().find("li").animate({margin:"15px"},500);
});
$("#narrow_anime3").live("click",function(){
$(this).parent().find("li").animate({margin:"1px"},500);
});
を走らせてみると、
例４
結果は（例２）と同じですが、
.test20111121 li.test2 {
margin:8px 9px 10px 11px;
}
と、４つをそれぞれ別の値にしてみると、IE では動かなくなってしまいました。Firefox, Safari, Chrome は変わらず、Opera では初回の押下だけ、ある値の間隔に最初に一瞬ガクンとなってからアニメーションになります。
例５
では、こういう書き方ではどうかと試してみましたが、
.test20111121 li.test3 {
margin-top:8px;
margin-right:9px;
margin-bottom:10px;
margin-left:11px;
}
例６
IE では動きません。４つの値を同じにすれば IE でも動きますが、
.test20111121 li.test4 {
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;
}
例７
Firefox, Safari, Chrome では相変わらず一旦 margin が 0 になってからのアニメーションとなります。
なお、animate() ではなく、css() では４方向を一括の「margin」で指定しても大丈夫のようです。
ということで、マルチブラウザに対応させるには、
jQuery の animate() で margin を与える場合は、４方向個別に指定するのが良い
みたいです。
では、padding の場合はどうか？ 時間ができたら後日続けたいと思います。
