Place an element with an animation effect (jQuery UI)

Question

I want to place an element (elemA) relative to another element (elemB). Therefore, I use jQuery ui position utility for this:

$(elemA).position({my:'right top', at:'left top', of:elemB}); 

But I want this positioning to be done with an animation effect.

How can I use .animate() to accomplish my task?

You can see what I have done so far in this fiddle . I want elemA to move to a new position with an animation effect using jQuery and jQuery ui.

Answer 1

Like this??

 <div> <div id="elemA"><button id="btn">click</button></div> <div id="elemB"></div> </div> $('#btn').click(function(){ var position = $('#elemB').offset().left-100; $("#elemA").animate({'left':position},'slow'); });​ 

Demo

Also check css, I edited it too.

Answer 2

You can use the position() option callback to animate the item being placed.

When specified, the actual property parameter is delegated to this callback. It receives two parameters: the first is the hash of the upper and left values ​​for the position that should be set and can be redirected to .css() or .animate() .

(Links added by me)

---

So your code will be:

 $('#btn').click(function() { $('#elemA').position({ my: 'right top', at: 'left top', of: $('#elemB'), using: function(pos) { $(this).animate(pos, "slow") } }); }); 

 #elemA { width: 100px; height: 100px; background: red; float: left; } #elemB { width: 100px; height: 100px; background: green; float: right; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> <div> <div id="elemA"> <button id="btn">click</button> </div> <div id="elemB"></div> </div>