请帮我解决这个问题。我有一个代码,当我使用jquery animate()单击moveCenter时,如果单击moveLeft并将左侧移动到中心,则会将div从中心移动到左侧;这是我的代码:
<html>
<head>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script type="text/javascript">
// Store offset before any animations
// (using .each here, but it could also be done in a click handler,
// before starting the animation)
$(document).ready(function(e) {
// Retrieve the offsets later
var element = $('.page-container');
$('.moveLeft a').on('click', function(){
element.data("originalOffset", element.offset());
$('.page-container').animate({left:-element.offset().left*2},'slow');
});
$('.moveCenter a').on('click', function(){
var offsetBack = element.data("originalOffset");
$('.page-container').animate({left:offsetBack.left},'slow');
});
});
</script>
<style type="text/css">
.page-container
{
width:700px;
height:1000px;
background:#000;
position:absolute;
margin:0px auto;
left:0;
right:0;
}
</style>
</head>
<body>
<div class="moveLeft"><a href="#">MoveLeft</a></div>
<div class="moveCenter"><a href="#">MoveCenter</a></div>
<div class="page-container"></div>
</body>
</html>
以上代码,从未为我工作过。我也试过使用jquery data()但是也不行。
我是否需要使用其他功能而不是动画()?
由于
答案 0 :(得分:2)
请在此处查看此小提琴:http://jsfiddle.net/9E2WQ/1/
你非常接近。
问题在于,每次点击.moveLeft a
时,每次都会更新起始位置。这意味着element
永远不会回到中心。