Question

我正在使用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这样的东西然后动画工作正常，但边缘：自动;我最初是将我的div放在中心位置。

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

使用jQuery 2会在IE8中出现JS错误，所以我已经确定了1.9.1。

我只是希望在所有浏览器中从头到尾制作动画。

Answer 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/

jQuery动画边距问题

1 个答案: