Así que tengo 2 div como se muestra en el siguiente código.
Lo que quiero es deslizar hacia arriba el segundo div (box-2) desde la parte superior del primer div. El verdadero problema es
No estoy seguro de cómo hacerlo, probé varias opciones pero no tuve suerte. Realmente aprecio si alguien puede guiar.
$('.box-2').animate({'margin-bottom': '83px'}, 3000); .box-1 { height: 30px; width: 100px; background-color: blue; color: white; position: fixed; bottom: 0px; } .box-2 { height: 30px; width: 500px; background-color: blue; color: white; position: fixed; bottom: 0px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <div class="box-1">div 1</div> <div class="box-2">div 2 - the one that will slide up from box-1's Top.</div>La forma más fácil, considerando su punto de partida, es simplemente usar la función de devolución de llamada expuesta dentro del método animate() , que se ejecutará una vez que se complete la animación inicial:
// your initial jQuery, which selects the '.box-2' element(s) and // passes that collection to the animate() method: $('.box-2').animate({ // here rather than quote (just to show the example), we camel case // the CSS 'margin-bottom' property to the (unquoted) 'marginBottom', // and pass in the new dimension to which the method will animate: marginBottom: '83px' // we then take advantage of the completion callback, which is called // when the first animation is complete: }, 1500, function() { // here we take the 'this' from the collection passed to the outer // animate() call in which this callback function is wrapped: $(this).animate({ // here we then animate the 'width' to its new dimension of // '500px': width: '500px' }, 1500); }); .box-1 { height: 30px; width: 100px; background-color: blue; color: white; position: fixed; bottom: 0px; } .box-2 { height: 30px; width: 100px; background-color: blue; color: white; position: fixed; bottom: 0px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <div class="box-2">Div that will slide up from box-1's Top.</div> <div class="box-1">Static div</div>Tenga en cuenta que, debido a que las dos animaciones se ejecutan secuencialmente, dividí su tiempo inicial de 3000 ms para que cada animación tome 1500 ms, de modo que el tiempo total tomado sea el mismo pero permitiendo que la animación se ejecute en etapas.
Referencias:
No estoy muy seguro de haber entendido completamente tu pregunta.
Pero si desea revelar el cuadro 2 detrás del cuadro 1, ¿no tiene que cambiar sus posiciones en el html? De modo que la casilla 1 siempre está delante de la casilla 2
$('.box-2').animate({'margin-bottom': '83px'}, 3000); .box-1 { height: 30px; width: 100px; background-color: blue; color: white; position: fixed; bottom: 0px; } .box-2 { height: 30px; width: 500px; background-color: blue; color: white; position: fixed; bottom: 0px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <div class="box-2">Div that will slide up from box-1's Top.</div> <div class="box-1">Static div</div>Utilice z-index:1; en css de .box-1
$('.box-2').animate({'margin-bottom': '83px'}, 3000); .box-1 { height: 30px; width: 100px; background-color: blue; color: white; position: fixed; bottom: 0px; z-index:1; } .box-2 { height: 30px; width: 500px; background-color: blue; color: white; position: fixed; bottom: 0px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <div class="box-1">div 1</div> <div class="box-2">div 2 - the one that will slide up from box-1's Top.</div>