Jquery move element from center to left and left to center
Please help me to solve this problem. I have a code which will move the
div from center to left if click moveLeft and left to center when I click
moveCenter using jquery animate(); here's my code below:
<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>
Above code, never worked for me. I tried also to used jquery data() but
doesn't work too.
Do I need to use another function instead of animation()?
Thanks
No comments:
Post a Comment