javascript - switch-case 内的 jQuery 动画无法正常工作

Question

我正在尝试使用 jQuery 编写动画。对于每种情况，都必须对某些跨度进行动画处理并执行到最后；随着下一个开始点击下一个动画出现。

问题是：第一种情况总是运行顺利，但之后动画问题就开始了。

在每种情况下，我都尝试在.animate方法之后使用.stopPropagation()，但只有第一种情况下的动画在单击按钮后运行。

我也尝试过使用 clearQueue()、finish()，它没有帮助；也许我应该使用 if 语句，但我需要帮助在代码中实现它。

你可以在这里查看：https ://ekaterinakalina.github.io/beuth/grammatik.html

这是代码：

   var time = 600;    //time variable for the slider function 
   
   var grammar_right =  ["1", "(1)"]   //array with expressions  
                     
   var output_right   //variable for function expression_right 
   


/**
* Function shows right expressions randomly
*/

function expressions() { output_right = grammar_right[Math.floor(Math.random()*grammar_right.length)]; 

document.getElementById("generate_expression").innerHTML = output_right; 
    
    
    switch (output_right) {
    case "1":
        document.getElementById("steps_text").innerText = "A =1a=> Z =3=> z";
        //Steps as text    
     
     $(function example(){   //animates the spans step-by-step

            $("#start").on("click", function(){
                $("#A").animate({fontSize: "35px"}).css("color", "#8BCDAB"); =
            setTimeout(function(){                                                   
                $("#A").animate({fontSize: "25px"});                                 
                }, time);
            setTimeout(function(){
                $("#aZ").animate({fontSize: "35px"}).css("color", "#8BCDAB");
                }, time); 
            setTimeout(function(){
                $("#aZ").animate({fontSize: "25px"});
                }, time);                                
            setTimeout(function(){
                $("#Z").animate({fontSize: "35px"}).css("color", "#8BCDAB");
                }, time);
            setTimeout(function(){
                $("#Z").animate({fontSize: "25px"});
                }, time);                             //.stopPropagation(); ?                                                                   
             });
             $("#stop").click(function(){                                                 
                $("span").stop(true, true);          //stop-button
            });
        }); 
    break;

    
case "(1)":
        document.getElementById("steps_text").innerText = "A =1c=> (A) =1a=> Z =3=> z";
   
      $(function examlple2(){    
        $("#start").on("click", function(){

          $("#A").animate({fontSize: "35px"}).css("color", "#8BCDAB");
           setTimeout(function(){                                  
                         $("#A").animate({fontSize: "25px"});     
                         }, time);
                    setTimeout(function(){
                         $("#A2").animate({fontSize: "35px"}).css("color", "#8BCDAB");
                         }, time); 
                    setTimeout(function(){
                         $("#A2").animate({fontSize: "25px"});
                         }, time);                                
                    setTimeout(function(){
                         $("#aZ").animate({fontSize: "35px"}).css("color", "#8BCDAB");
                         }, time);
                    setTimeout(function(){
                         $("#aZ").animate({fontSize: "25px"});
                         }, time);
                    setTimeout(function(){
                         $("#Z").animate({fontSize: "35px"}).css("color", "#8BCDAB");
                         }, time);
                    setTimeout(function(){
                        $("#Z").animate({fontSize: "25px"});
                        }, time).stopPropagation();                                
                     });

                $("#stop").click(function(){                                  
                    $("span").stop(true, true);           //stop-button
                }); 
            });
    break;   
    }
}

标签： javascriptjqueryanimationswitch-statementcase