jquery - CSS不会根据值jquery和CSS改变

我正在尝试使用jquery来操纵css，我的变量将显示在控制台日志中，但该变量不会编辑css。为什么是这样？我有一个输入字段，我希望该值将动画的速度更改为输入的值。

$(document).ready(function() {
    $('input').change(function(){
    var val = this.value;
        if (this.value > "0") {
            $(".orb").addClass("rotating");
            $(".rotating").css("animation","rotating'"+val+"'s linear infinite;")
        }
        else {
            $(".orb").removeClass("rotating");
        }
        console.log(val);
    });
});

.rotating {
   animation: rotating 5s linear infinite;
}

最佳答案

您有错别字，尤其是在这一行：

$(".rotating").css("animation","rotating'"+val+"'s linear infinite;")

应该是$('.rotating').css("animation","rotating "+val+"s linear infinite");

$(document).ready(function() {
        $('input').change(function(){
        var val = $(this).val();
            if (val > 0) {
                $(".orb").addClass("rotating");
                $('.rotating').css("animation","rotating "+val+"s linear infinite");
            }
            else {
                $(".orb").removeClass("rotating");
            }
            console.log(val);
        });
    });