<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ceshi</title>
<style type="text/css">
/*测试*/
.line{width: 100%;height: 4px;background: #fff;position: relative;}
.line .left{width: 4%;height: 4px;background: #ff6817;display: block;position: absolute;left: 50.1%;top: 0;}
.line .right{width: 4%;height: 4px;background: #ff6817;display: block;position: absolute;left: 49.9%;top: 0;}
</style>
</head>
<body>
<div class="line">
<span class="left"></span>
<span class="right"></span>
</div>
<script src="jquery.1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
var css = {width:\'40%\',left:\'10%\'};
$(\'.left\').animate(css,2000,rowBack);
function rowBack () {
if(css.width === \'40%\'){
css = {width:\'4%\',left:\'50.1%\'}
}else if(css.width === \'4%\'){
css = {width:\'40%\',left:\'10%\'};
}
$(\'.left\').animate(css,2000,rowBack);
}
var css1 = {width:\'40%\',left:\'49.9%\'};
$(\'.right\').animate(css1,2000,rowBack1);
function rowBack1 () {
if(css1.width === \'40%\'){
css1 = {width:\'4%\',left:\'49.9%\'}
}else if(css1.width === \'4%\'){
css1 = {width:\'40%\',left:\'49.9%\'};
}
$(\'.right\').animate(css1,2000,rowBack1);
}
</script>
</body>
</html>