Fly HTML Element From One Position To Another using jQuery

October 10, 2017 10:16 pm by ATS Staff

Following code demonstrates flying one div to to another div using jQuery

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
function fly(from, to, speed) {
    var new_el = jQuery('#'+from).clone().appendTo('#'+to);
    var new_pos = new_el.position();
    new_el.hide();
    jQuery('#'+from).css('position', 'absolute').animate(new_pos, speed, function() {
        new_el.show();
        jQuery('#'+from).remove();
    });
}
</script>

<div id='div1' style="float: left" onclick="fly('div1', 'div2', 1000);">Moving To</div><br /><br />
<div id='div2' style="float: right;">&nbsp;Destination</div>