¿Por qué mi efecto jQuery no funciona como dice?

Tengo 3 preguntas sobre mi estudio jQuery hoy.

  1. ¿Por qué mi código jQuery no tiene el efecto de animación como debería ser? por ejemplo, .slideUp () y .slideDown (), mi código muestra algo extraño en lugar de la animación de slideUp.

  2. Entiendo, la función .hide () o .slideUp () es solo para OCULTAR el cuadro div, no para ELIMINARlos, sin embargo, en mi código, ¿por qué la posición de otros cuadros div cambió después de un DIV .hide ()? ¿No debería permanecer en su posición original ya que la caja DIV todavía está allí, simplemente ESCONDIDA?

  3. ¿Cómo puedo lograr que otros DIV permanezcan en la posición original cuando se ha ocultado una casilla DIV?

$(document).ready(function() { $('#panel1').slideUp(1000).delay(1500).slideDown(1000); }); 
 .panel { display: inline-block; width: 80px; height: 60px; border: 1px solid green; position: relative; top: 20px; margin-left: 45px; border-radius: 5px; } .panelTop { height: 30px; background-color: blue; color: white; text-align: center; } 
  
#panel1
content
#panel2
content
#panel3
content
#panel4
content

Para su primera pregunta

  • ¿Por qué mi código jQuery no tiene el efecto de animación como debería ser? por ejemplo, .slideUp () y .slideDown (), mi código muestra algo extraño en lugar de la animación de slideUp.

El método .slideUp() anima la altura de los elementos coincidentes. Significa que anima la altura para que llegue a 0 (o, si se establece, a lo que sea la propiedad CSS min-height). Mira aquí para referencia. Eso es exactamente lo que le está sucediendo a su primer cuadro: está disminuyendo en altura.

Después, la propiedad de estilo de display se establece en none para garantizar que el elemento ya no afecte al diseño de la página.

¿Qué pantalla no hace?

  • display:none significa que la etiqueta en cuestión no aparecerá en la página en absoluto

Ahora para la segunda y tercera pregunta

  • Entiendo, la función .hide () o .slideUp () es solo para OCULTAR el cuadro div, no para ELIMINARlos, sin embargo, en mi código, ¿por qué la posición de otros cuadros div cambió después de un DIV .hide ()? ¿No debería permanecer en su posición original ya que la caja DIV todavía está allí, simplemente ESCONDIDA?


  • ¿Cómo puedo lograr que otros DIV permanezcan en la posición original cuando se ha ocultado una casilla DIV?

Las .hide() y .slideUp() que ambos agregan display:none a su elemento tag . Significa que ya no están

Ahora, ¿qué puedes hacer para que se queden allí, pero ocultos a la vista?

Puede usar la propiedad de visibility u opacity en lugar de usar la propiedad de display .

Por ejemplo: visibility: hidden; lo ocultará de la vista.

Actualizará tu violín para demostrarlo en un momento. Espero que esto te ayudará. Por favor, siéntase libre de preguntar si no está claro. Gracias.

 $(document).ready(function() { setInterval(function(){ $('#panel1').slideUp(1000).delay(500).slideDown(1000); }, 3000); }); 
 .outer-div { position: relative; display: inline-block; min-height: 1px; margin-right: 15px; margin-left: 15px; width: 130px; height: 90px; } .panel { border: 1px solid green; margin-left: 45px; border-radius: 5px; position:absolute; top:0; width: 100%; } .panelTop { height: 30px; background-color: blue; color: white; text-align: center; } 
  
#panel1
content
#panel2
content
#panel3
content
#panel4
content

Deberías usar display:flex on .panels , que resuelve tu primera pregunta.

Para la segunda pregunta, debe usar visibility u opacity .
Con el código actual lo está eliminando, aunque se llama hide() es equivalente a la display:none; CSS display:none; que no mantiene el espacio del elemento.

Aunque en realidad no necesita establecer la visibility en su caso, ya que al deslizar hacia arriba se ocultará el elemento y se mostrará hacia abajo.

Algo como esto:

 $('#panel1').animate({ top: -62 // 60 is height of element plus 2px of borders }, 1000).delay(1500).animate({ top: 0 }, 1000); 

También tienes que cambiar CSS un poco.
Agregue esto a su CSS:

 .panels { display: flex; overflow: hidden; margin-top: 20px; } 

Y desde .panel remove top: 20px;

El ejemplo completo está aquí https://jsfiddle.net/_jakob/cphptby3/1/