Question

I am creating div’s animation as http://tententen.in/

$(document).ready(function(){
    $('#home-top').click(function() {
        $('#top').animate({
            marginTop: '50px'
        },500);
    });
    $('#home-right').click(function() {
        $('#left').animate({
            marginLeft: '-100%'
        },'fast');
        $('#right').animate({
            marginRight: '33%'
        },'fast');
    });
    $('#home-left').click(function() {
        $('#left').css({'position':'relative'}).animate({ left:'33%' },'fast');
        $('#home-container').css({ 'position': 'relative'}).animate({ left:'33%' },'fast');
        $('#right').css({'position':'relative'}).animate({ right:'-33%' },'fast');
    });
});

---

In my script here is only three div’s. i need only left right animation..
i tried but some thing getting wrong..

http://jsbin.com/amimih/1/

Answer 1

You can use this code instead of left

var pos = $(this).position();
"margin-left" : pos.left or etc;
or
left : pos.left or etc;

and use this code instead of marginRight

"margin-right":"30px"

or you can use position:relative in css file