Question

我正在尝试使用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;
}

Answer 1

您需要像这样仔细地做

您可能有

犯了一个愚蠢的错误
混合值字符串和数字
不正确的转义引号

我看到您已将您的值与“ 0”进行了比较，该值是字符串，并且具有其他等效数字而是这样尝试->

如果（Number（inputfield.value）> 0）{...代码}

请发布完整的html代码，以便我对其进行调试

function f() {
  var a=$(`#p`).val();
  console.log(a);
  $(`.r`).css(`animation`,`spin ${a}s infinite`)
}

.r {
  width: 20px;
  height: 20px;
  color: red;
}

@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="r">askjnhd</div>
<input id='p' />
<button onclick="f()">doit</button>

Answer 2

您有错别字，尤其是在此行中：

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

Answer 3

您可以在取消动画时欺骗系统，然后重新启动

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

.rotating {
  width: 100px;
  height: 100px;
  background-color: blue;
  animation: rotating 5s linear infinite;
}

@keyframes rotating {
  from {transform: rotate(0deg);}
  to {transform: rotate(90deg);}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text">
<div class="rotating"></div>

CSS不会根据值jquery和CSS改变

3 个答案: