jQuery动画边距问题答案

【问题标题】：jQuery animation margin issuejQuery动画边距问题
【发布时间】：2013-05-23 07:21:32
【问题描述】：

我正在使用 jQuery 应客户端的请求创建介绍动画。此代码适用于除 IE8 和 Safari (PC) 之外的大多数浏览器，其中 div 跳转到最终位置而不是动画。我已经用了几天了：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>

我已经尝试了很多东西，如果我更改边距就会出现：auto;像 200px 这样动画效果很好，但是 margin: auto;是什么首先将我的 div 定位在中心。

我尝试过使用 %，但这需要响应式，并且 % 在某些浏览器中会出现对齐问题。

在 IE8 中使用 jQuery 2 会出现 JS 错误，所以我选择了 1.9.1。

我只是想让它在所有浏览器中从头到尾都有动画效果。

【问题讨论】：

jQuery 2.0 具有与 jQuery 1.9 相同的 API，但 不支持 Internet Explorer 6、7 或 8。

标签： jquery jquery-animate

【解决方案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>

$(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/

【讨论】：

这非常有效，您为我节省了大量时间。谢谢。