Javascript JQuery何时启动_Javascript_Jquery_.when

Javascript JQuery何时启动

javascript jquery

Javascript JQuery何时启动,javascript,jquery,.when,Javascript,Jquery,.when,伙计们，我正在制作一个菜单栏，但我一直被困在动画或移动它。以下是我的相关代码： function navbar(){ document.getElementById("a").style.marginLeft = "50%"; . . . function navbar2(){ document.getElementById("a").style.marginTop = &qu

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

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

我希望我的导航栏图标首先向左移动边距=50%；在此之后，当我的图标达到左边50%时，将图标移到顶部。但现在当我点击图标时，它开始同时向上和向右移动。但我希望我的图标先向右，然后再向上

有人能帮忙吗？

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

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

现在是使用

@keyframes

关键字创建动画的时候了。在关键字之后指定动画的名称。在

@keyframes

块中，继续执行动画的步骤。在下面的示例中，我使用了

0%

、

50%

和

100%

作为动画的步骤或关键帧。这些数字表示起点（0%）、中点（50%）和终点（100%）

在关键帧的块中，可以指定在该特定点上希望样式是什么。所以你可以说，一开始你不需要任何保证金，但在50%时，你希望保证金在左边

-50%

。然后在100%时，您希望左边的边距为

-50%

，顶部的边距为

-100px

/**
*定义具有动画特性的类。
*此特定类使用导航栏动画
*3秒钟内完成，无延迟。它也有一个线性放松
*而且只运行一次。填充模式指定最后一个关键帧
*如果动画完成，则动画的效果应保持不变。
*否则，您的元素将返回其起始位置。
*/
.动画{
动画名称：导航栏动画；
动画持续时间：3s；
动画延迟：0s；
动画计时功能：线性；
动画迭代计数：1
动画填充模式：正向；
/*还是速记*/
动画：导航栏动画3s 0s线性1向前；
}
@导航栏动画的关键帧{
0% {
/**
*这是动画的起始位置。
*没有任何利润。
*/
保证金：0；
}
50% {
/**
*在中间点，元素应为50%至
*在左边。
*/
利润率：0-50%；
}
100% {
/**
*最后，动画必须向左移动50%
*100像素以上。
*/
利润率：0-100px 0-50%；
}
}

因为现在已经在CSS中指定了动画，所以不必再在JavaScript中担心它，这使JS变得简单多了

现在需要做的就是添加上面指定的CSS类，并在单击应该触发动画的元素时添加它

$（文档）.ready（函数（）{
//选择元素并将其存储在变量中，以便
//您不必再次选择它。
变量$a=$（“#a”）；
//只向元素添加一个CSS类，并让CSS
//处理动画。
函数addAnimation（）{
$a.addClass（'动画'）
}
//收听单击以调用addAnimation函数。
$a.on（'click'，addAnimation）；
});

这样可以创建所需的动画。作为旁注，我想补充一点，我鼓励您使用属性而不是

margin

来移动元素<代码>转换用于此类操作，不会中断文档流并保持高性能。

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