Javascript-JQuery 何时

Question

伙计们，我正在制作一个菜单栏，但我一直在制作动画或移动它。 这些是我的相关代码：

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

我希望我的导航栏图标首先移动 margin-left = 50%; 之后，当我的图标达到左边距 50% 时，将图标移到顶部。 但是现在当我点击图标时，它同时开始在 go 顶部和右侧。 但我希望我的图标首先是 go ，然后是 go 顶部。

有人可以帮忙吗？

Answer 1

jQuery 可以做动画，但 CSS 可以用CSS Keyframes做得更好。 这是因为 CSS 性能更高，并且可以使用低级系统（直接与浏览器对话）来制作动画。

首先创建一个具有animation属性的 CSS class 。 使用此属性，您可以告诉浏览器 animation 应该是什么，需要多长时间，是否有延迟，以及更多选项。

现在是时候使用@keyframes关键字创建您的 animation 了。 在关键字之后指定 animation 的名称。 在@keyframes块中，您继续执行 animation 的步骤。 在下面的示例中，我使用0% 、 50%和100%作为 animation 的步骤或关键帧。 这些数字表示开始 (0%)、中点 (50%) 和结束 (100%)。

在关键帧的块中，您可以指定您希望该特定点的样式。 所以你可以说一开始你不想要任何边距，但在 50% 时你希望边距是左边的-50% 。 然后在 100% 时，您希望边距为左侧-50%和顶部-100px 。

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

}

因为您现在在 CSS 中指定了 animation，所以您不必再担心 JavaScript 中的它，这使您的 JS 变得不那么复杂。

您现在要做的就是添加您在上面指定的 CSS class 并在您单击应该触发 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);

});

这应该可以创建您想要的 animation。 作为旁注，我想补充一点，我鼓励您使用transform属性而不是margin来移动元素。 transform用于这种操作，不会中断文档流并保持高性能。

Answer 2

您可以使用 jQuery 执行此操作，而无需navbar()和navbar2() ：

 $("#a").click(function() { $(this).animate({ margin-left: "50%" }, "slow").animate({ margin-top: "-100px" }, "slow"); });