为什么动画速度参数不带我的变量jQuery

Question

我需要变量 'gv' 来获得按钮的值，我用 this.value 做到了这一点，并且它作为警报提供了正确的值。但是一旦我将该变量赋予动画的速度参数，它就不起作用了。

我尝试在动画中赋予变量正确的位置，但这也不起作用。我还尝试给动画随机值，看看它是否受到影响，确实如此。但是这个变量根本没有做任何事情。

$(document).ready(function() {
  $("button").click(function() {
    var GV = this.value;
    $("#ball").animate({
      bottom: "0px"
    }, GV);
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="ball"></div>
<button value="18999" class="btn">butt on</button>

我希望动画以 18999 毫秒的速度将 div 拉到底部，但它以 800 毫秒的速度拉到底部

Answer 1

您忘记将 GV 值解析为整数（this.value 是一个字符串）：

 $(document).ready(function() {
    $("button").click(function() {
       let GV = $(this).val();
       console.log(GV);
      $("#ball").animate({
        bottom: "0px"
      }, parseInt(GV));
    })
  });

要尝试的代码：

$(document).ready(function() {
  $("button").click(function() {
    var GV = this.value;
    console.log(GV);
    $("#ball").animate({
      bottom: "0px"
    }, parseInt(GV));
  })
});

#ball {
  background-color: red;
  width: 10px;
  height: 10px;
  position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="ball"></div>
<button value="18999" class="btn">button</button>

Answer 2

this.value 是一个字符串。根据 JQuery Docs，animate() 方法参数允许的字符串是 'fast' 或 'slow'。将忽略任何其他字符串并使用默认速度。使用parseInt($(this).val())获取按钮元素的整数值：

var GV = parseInt($(this).val());

为什么动画速度参数不带我的变量jQuery

Why doesn't the animation speed parameter take my variable jQuery

javascript

jquery

jquery-animate