Animate object between relative “position:absolute” coordinence

Question

I have a box that is in this position

position:absolute;
right:20px;
top:10px;
cursor:pointer;

When I click it I want it to be in this position

position:absolute;
right:unset;
left:500px;
top:10px;
cursor:pointer;

As seen here: http://jsfiddle.net/syogua8o/1/

That part is simple, the hard part is getting it to animate between those positions. I want the object to get an ease motion between those two points. I don't know how to go about doing this. Anything works as long as I can be 20px left and 500px right of the viewport edge when animating. I need it to be relative to the viewport edge.

Answer 1

You can set left and width from after css has been calculated and add a css transition. Window resize won't be handled, but you can probably add a function that redoes the calculations.

$("box").css('left', $('box').position().left+'px')
$("box").css('width', $("box").width()+1)

$("box").click(function () {
    $("box").toggleClass("newpos");

});

box {
    position:absolute;
    background:red;
    right:20px;
    top:10px;
    cursor:pointer;
    transition: left 2s ease-out;
}
box.newpos {
    right:unset;
    left:500px !important;
}

http://jsfiddle.net/q8a1sjtx/1/

Answer 2

I am using animate hear now as you can see i provided right 0px because if you provide 500px with position:absolute; then it will still at that position this is just an example of how to animate now you can provide left or any style you want in this animate function.

Even you can Provide css also and then animate using jQuery .animate to animate a div from right to left?

See above link for animation.

Or you can use jquery ui also

For that see this link http://jsfiddle.net/kevalbhatt18/oxL8vanw/

This all are reference for you how to animate using different pattern and as you can see Julien Grégoire given you css solution that is also nice

---

See this example: http://jsfiddle.net/kevalbhatt18/syogua8o/3/

  $("box").click(function () { $("box").animate({ right: "0px" },'slow'); });