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%;在此之后，当我的图标达到 margin-left 50% 时，将图标移到顶部。但现在当我点击图标时，它开始同时向右上方移动。但是我希望我的图标先向右然后到顶部。

有人可以帮忙吗？

Answer 1

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

首先创建一个 CSS class，它有一个 animation 属性。有了这个属性你可以告诉浏览器动画应该是什么，需要多长时间，是否有延迟，以及更多选项。

现在是使用 @keyframes 关键字创建动画的时候了。在关键字之后指定动画的名称。在 @keyframes 块中，您可以继续动画的步骤。在下面的示例中，我使用 0%、50% 和 100% 作为动画的步骤或关键帧。这些数字表示起点 (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 中指定了你的动画，你不必再在你的 JavaScript 中担心它，这使你的 JS 变得不那么复杂。

您现在要做的就是在此处添加您在上面指定的 CSS class 并在您单击应触发动画的元素时添加它。

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

});

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

Answer 2

你可以用 jQuery 这样做，不需要 navbar() 和 navbar2() :

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

Javascript-JQuery当

Javascript-JQuery When

javascript

jquery

.when