Estoy tratando de simular como si se guardara un elemento visualmente.
$(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>
El problema es que el div FOO desaparece y no quiero eso, quiero que se clone y ese FOO clonado haga el efecto, no quiero perder el original pero no lo consigo, intenté hacerlo así:
$('#foo').clone().animate({
left: '100%',
bottom: '0',
opacity: '0',
height: '0px',
width: '0px'
}, 'slow');
Gracias por sus sugerencias