jquery动画速度不变

jquery animate speed not changing

本文关键字：速度 动画 jquery      更新时间：2023-09-26

我正在使用按钮单击事件向下滚动整个页面。当我更改jquery animate((函数的持续时间参数时，速度似乎没有改变。我做错了什么？

这是我的代码：

    $("#arrowdown").click (function(){
        $("html, body").animate(
        {
            scrollTop: $("#second-page").offset().top
        }, 
        100//no matter how I changed here, the speed haven't change at all.
        );
    })

我不久前写了一些非常类似的代码，虽然你没有说#arrowdown项目是一个链接，但我敢打赌它是，它指向#second页面(href='#second page'(，如果是这样的话，它会直接跳下页面，根本没有动画。

试试这个：

$("#arrowdown").click (function(e){
    e.preventDefault();
    $("html, body").animate(
    {
        scrollTop: $("#second-page").offset().top
    }, 
    1000
    );
})

最大的变化是function(e)和e.preventDefault();，它们将阻止默认操作覆盖您想要发生的事情。

好的，一个原因可能是你的文本不够长，我按比例分配了一个选择下拉列表，选择一个速度，然后单击向下箭头，它会占用所需的速度

$('select').on('change', function(){
  $("html, body").scrollTop(0);
  var v = parseInt($(this).val());
  $("#arrowdown").off('click').on('click', function(){
     $("html,body").animate(
       {'scrollTop': $("#second-page").offset().top}, v
     );
  });
}).trigger('change');
//just to make text long //ignore
var x = $('div.dum').text();
for(var i=0; i<5; i++){
  x+=x;
}$('div.dum').text(x)
#botton{
  width:200px;height:40px;
  background:#ccc;
  position:fixed;
  bottom:0;
  right:0;
  padding:5px;
}
#botton > Button, #botton > select{float:left;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=dum>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</div>
<span id="second-page">Hello second</span>
<div id=botton>
  Select a speed in seconds<select>
    <option value=100>100</option>
    <option value=500>500</option>
    <option value=1000>1000</option>
    <option value=2000>2000</option>
  </select>
  <button id="arrowdown">Click Down Arrow</button>
</div>

100=0.1秒，尝试811和/或{scrollTop:$(document(.height((}

$("#arrowdown").click (function(){
    $("html, body").animate(
    {
        scrollTop:$(document).height()
    }, 
    811
    );
})

尝试以下代码-

$("#arrowdown").click (function(){
        $("html body").animate(
        {
            scrollTop: $("#second-page").offset().top
        }, 
        100//no matter how I changed here, the speed haven't change at all.
        );
    })

你不需要在html body之间加逗号。

相关文章：