1

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

1 respuesta 1

2

Lo puedes clonar, pero lo debes insertar en alguna parte del documento. El problema es que deberia estar en la misma posición que el contenido original.

Dadas las restricciones de css de la pregunta, podrias hacer algo como:

$(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>

1
  • Muchas gracias sensei, funciona al 110%. Commented el 24 abr. 2018 a las 21:37

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.