Rahil Khan Rahil Khan - 2 years ago 221
jQuery Question

move an element from one div to another div with animate effect on button click using html and jquery

on button click please help me by showing some examples how to move an element by taking its attribute as src image and placing it in another div, please find below the html sample, here i need to move respuestas img into article preg with animate effect and revert back on reset.

<section id="preguntas">
<div id="base">
<article class="preg1">
<article class="prega">
<article class="pregb">
<article class="pregc">
<article class="pregd">
<article class="prege">
<article class="pregf">
<div id="respuestas">
<span id="img1"> <img src="img/img1.png" class="respuesta" alt="img1"/></span>
<span id="img2"> <img src="img/img2.png" class="respuesta" alt="img2"/></span>
<span id="img3"> <img src="img/img3.png" class="respuesta" alt="img3"/></span>
<span id="img4"> <img src="img/img4.png" class="respuesta" alt="img4"/> </span>
<span id="img5"> <img src="img/img5.png" class="respuesta" alt="img5"/></span>
<span id="img6"> <img src="img/img6.png" class="respuesta" alt="img6"/></span>
<div id="btns">

<input id="Move" type="button" value="Done" /><br />

Answer Source

Got it working, here is the fiddle



var x;
var y;
        $(this).addClass('selected') ;
        x = $(this).offset().left;
        y = $(this).offset().top;

    var xi = $(this).offset().left;
    var yi = $(this).offset().top;
    $(this).css('left', xi).css('top', yi);
    left: x,
    top: y

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download