Clone an item and make an animate without losing the original

Question

Clone an item and make an animate without losing the original

Navigation

#1 by (2 votes)

1

I'm trying to simulate as if you were saving an item visually.

$(function(){

  $(document).on('click','#save',function(){
    $('#foo').animate({
              left: '100%',
              bottom: '0',
              opacity: '0',
              height: '0px',
              width: '0px'
    }, 'slow');
  });
})

#foo{
  height: 250px;
  width: 25%;
  background-color: cyan;
  border: 1px solid black;
  position: relative;
}

#bar{
  position: absolute;
  top: 1%;
  right: 1%;
  background-color: red;
  height: 15px;
  width: 10%;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="foo">
  mucha info
</div><br>
<input type="button" id="save" value="Guardar">
<div id="bar">
  saved
</div>

The problem is that the div FOO disappears and I do not want that, I want it to be cloned and that cloned FOO does the effect, I do not want to lose the original but I do not get it, I tried to do it like this:

$('#foo').clone().animate({
          left: '100%',
          bottom: '0',
          opacity: '0',
          height: '0px',
          width: '0px'
}, 'slow');

Thanks for your suggestions

javascript jquery

asked by Alberto Siurob 24.04.2018 в 21:33

source

1 answer

doubt with malloc Jquery UI combobox selected item

score 2 · Accepted Answer

You can clone it, but you must insert it somewhere in the document. The problem is that it should be in the same position as the original content.

Given the css restrictions of the question, you could do something like:

$(function(){

  $(document).on('click','#save',function(){
    var realFoo = $('#foo');
    var cloned = realFoo.clone().css("top", "-250px");
    cloned.insertAfter(realFoo)
       .animate({
              left: '100%',
              bottom: '0',
              opacity: '0',
              height: '0px',
              width: '0px'
    }, 'slow', function complete(){
        cloned.remove();
    });
  });
})

#foo{
  height: 250px;
  width: 25%;
  background-color: cyan;
  border: 1px solid black;
  position: relative;
}

#bar{
  position: absolute;
  top: 1%;
  right: 1%;
  background-color: red;
  height: 15px;
  width: 10%;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="foo">
  mucha info
</div><br>
<input type="button" id="save" value="Guardar">
<div id="bar">
  saved
</div>
</div>