JQuery – animate moving DOM element to new parent?

by

This is actually quite difficult because you have to remove and add it to the DOM but keep its position. I think you’re looking for something like this. Basically we don’t animate either the arrow in #cell1 or #cell2. We just create a new one in the body-tag and animate that. That way we don’t have to worry about the table cell positions because we can position relative to the document.

var $old = $('#cell1 img');
//First we copy the arrow to the new table cell and get the offset to the document
var $new = $old.clone().appendTo('#cell2');
var newOffset = $new.offset();
//Get the old position relative to document
var oldOffset = $old.offset();
//we also clone old to the document for the animation
var $temp = $old.clone().appendTo('body');
//hide new and old and move $temp to position
//also big z-index, make sure to edit this to something that works with the page
$temp
  .css('position', 'absolute')
  .css('left', oldOffset.left)
  .css('top', oldOffset.top)
  .css('zIndex', 1000);
$new.hide();
$old.hide();
//animate the $temp to the position of the new img
$temp.animate( {'top': newOffset.top, 'left':newOffset.left}, 'slow', function(){
   //callback function, we remove $old and $temp and show $new
   $new.show();
   $old.remove();
   $temp.remove();
});

I think this should point you in the right direction.

More Related Contents:

  1. How do I check if an element is hidden in jQuery?
  2. Why does jQuery or a DOM method such as getElementById not find the element?
  3. How do I set/unset a cookie with jQuery?
  4. jQuery .live() vs .on() method for adding a click event after loading dynamic html
  5. Detect element content changes with jQuery
  6. How can I select an element by name with jQuery?
  7. jQuery object and DOM element
  8. How to get the element clicked (for the whole document)?
  9. Javascript Drag and drop for touch devices [closed]
  10. Prevent jQuery UI dialog from setting focus to first textbox
  11. Check if option is selected with jQuery, if not select a default
  12. How to check if an embedded SVG document is loaded in an html page?
  13. Combine multiple JavaScript files into one JS file [closed]
  14. jQuery Drag/Resize with CSS Transform Scale
  15. Apply jQuery datepicker to multiple instances
  16. How do I drag multiple elements at once with JavaScript or jQuery?
  17. How do I monitor the DOM for changes?
  18. jQuery events .load(), .ready(), .unload()
  19. Trees in Twitter Bootstrap [closed]
  20. How to dynamic filter options of with jQuery?
  21. How to stop event bubbling with jquery live?
  22. jQuery UI AutoComplete: Only allow selected valued from suggested list
  23. Customizing the Add/Edit Dialog in jqGrid
  24. Why do multiple `.appendTo` calls on a newly created jQuery element only append it once?
  25. Uncaught TypeError: Cannot read property ‘top’ of undefined
  26. How to remove DOM elements without memory leaks?
  27. JQuery show and hide div on mouse click (animate)
  28. Returning value from confirmation dialog using JQuery UI dialog
  29. A non-nested animation sequence in jQuery?
  30. Removing element with jQuery?

Leave a Comment