Chicos, estoy creando una barra de menú, pero me he quedado atascado al animarla o moverla. Estos son mis códigos relevantes:

    function navbar(){ 
    document.getElementById("a").style.marginLeft = "50%";
    .
    .
    .
    function navbar2(){
     document.getElementById("a").style.marginTop = "-100px";
    }
    $(document).ready(function(){
        $("#a").click(function(){
           navbar();
       var x = $('#a');  
$.when(x.css("margin-left")=="50%").done(function(){
            navbar2();
       });
      });
    });

Quiero que el icono de mi barra de navegación se mueva primero margin-left = 50%; y después de esto, cuando mi icono alcance el 50% del margen izquierdo, mueva el icono hacia la parte superior. Pero ahora, cuando hago clic en el icono, comienza a ir hacia arriba y hacia la derecha al mismo tiempo. Pero quiero que mi ícono vaya primero a la derecha y luego a la parte superior.

¿Puede alguien por favor ayudar?

0
Ö. ALP EREN GÜL 9 ago. 2020 a las 14:14

2 respuestas

La mejor respuesta

Puede hacerlo así con jQuery, sin requerir navbar() y navbar2():

$("#a").click(function() {
  $(this).animate({
      margin-left: "50%"
    }, "slow")
    .animate({
      margin-top: "-100px"
    }, "slow");
});
1
Pranav Rustagi 9 ago. 2020 a las 13:00

JQuery puede hacer animaciones, pero CSS puede hacerlo mejor con CSS Keyframes. Esto se debe a que CSS es mucho más eficiente y puede usar sistemas de bajo nivel (hablar directamente con el navegador) para hacer sus animaciones.

Comience por crear una clase CSS que tenga una propiedad animación. Con esta propiedad puedes decirle al navegador cuál debería ser la animación, cuánto tiempo debería tardar, si tiene un retraso y muchas más opciones.

Ahora es el momento de crear su animación con la palabra clave @keyframes. Después de la palabra clave, especifica el nombre de la animación. Dentro del bloque @keyframes continúas con los pasos de la animación. En el siguiente ejemplo, he usado 0%, 50% y 100% como los pasos, o fotogramas clave, de la animación. Estos números indican el inicio (0%), el punto medio (50%) y el final (100%).

Dentro de los bloques de los fotogramas clave, especifica qué estilo desea que sea en ese punto específico. Así que podría decir que al principio no quiere ningún margen, pero al 50% quiere que el margen sea -50% a la izquierda. Luego, al 100%, desea que el margen sea tanto -50% hacia la izquierda y -100px hacia la parte superior.

/** 
 * Define a class with an animation property.
 * This specific class uses the navbar-animation animation which 
 * completes in 3 seconds without delay. It also has a linear easing 
 * and only runs once. The fill-mode specifies if the last keyframe
 * of the animation should persist if the animation is finished. 
 * Otherwise your element would shoot back to its starting position.
 */
.animation {
  animation-name: navbar-animation;
  animation-duration: 3s;
  animation-delay: 0s;
  animation-timing-function: linear;
  animation-iteration-count: 1
  animation-fill-mode: forwards;
  /* Or in shorthand */
  animation: navbar-animation 3s 0s linear 1 forwards;
}

@keyframes navbar-animation {
  
  0% {
    /**
     * This is the starting position of the animation.
     * without any margins.
     */
    margin: 0;
  }

  50% {
    /**
     * At the halfway point the element should be 50% to
     * to the left.
     */
    margin: 0 0 0 -50%;
  }

  100% {
    /**
     * At the end the animation has to be 50% to the left
     * and 100px up.
     */
    margin: 0 -100px 0 -50%;
  }

}

Debido a que ahora tiene su animación especificada en CSS, no tiene que preocuparse más por eso en su JavaScript, lo que hace que su JS sea mucho menos complejo.

Todo lo que tiene que hacer ahora es agregar la clase CSS que especificó anteriormente aquí y agregarla cada vez que haya hecho clic en el elemento que debería activar la animación.

$(document).ready(function() {

  // Select the element and store it in a variable so 
  // you don't have to select it again.
  var $a = $('#a');

  // Only add a CSS class to the element and let CSS
  // handle the animation.
  function addAnimation() {
    $a.addClass('animation')
  }

  // Listen for click to call the addAnimation function.
  $a.on('click', addAnimation);

});

Eso debería bastar para crear la animación que quieras. Como nota al margen, quiero agregar que le animo a utilizar el { {X0}} propiedad en lugar de margin para mover sus elementos. transform está diseñado para este tipo de operación sin interrumpir el flujo del documento y mantener un alto rendimiento.

1
Emiel Zuurbier 9 ago. 2020 a las 12:52