javascript - Javascript-JQuery When

Question

Guys I am making a menu bar but I have been stuck in animating or moving it. These are my reletant codes:

    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();
       });
      });
    });

I want my navbar icon to first move margin-left = 50%; and after this when my icon reaches margin-left 50%, move icon to top. But now when I click on icon it starts to go top and right at same time. But I want my icon to first go right then go top.

Can someone please help?

标签： javascriptjquery.when

Answer 1

jQuery can do animations but CSS can do them better with CSS Keyframes. This is because of CSS being much more performant and can use low-level systems (talk directly to the browser) to do your animations.

Start off by creating a CSS class which has an animation property. With this property you can tell the browser what the animation should be, how long it should take, if it has a delay, and many more options.

Now it's time to create your animation with the @keyframes keyword. After the keyword you specify the name of the animation. Inside the @keyframes block you continue with the steps of the animation. In the example below I've used 0%, 50% and 100% as the steps, or keyframes, of the animation. These numbers indicate the start (0%), the halfway point (50%) and the end (100%).

Within the blocks of the keyframes you specify what you want the style to be at that specific point. So you could say that at the start you don't want any margin, but at 50% you want the margin to be -50% to the left. Then at 100% you want the margin to be both -50% to the left and -100px to the top.

/** 
 * 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%;
  }

}

Because you now have your animation specified in CSS, you don't have to worry anymore about it in your JavaScript, which makes your JS much less complex.

All you have to do now is to add the CSS class you specified above here and add it whenever you've clicked the element that should trigger the animation.

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

});

That should do it to create the animation you want. As a side note I want to add that I encourage you to use the transform property instead of margin to move your elements. transform is meant for this kind of operation without breaking the flow of the document and keeping performance high.