Question

我知道jquery中已经有一个允许你动画的功能。但是，我想知道如何使一个元素变得容易进入我希望它与javascript一起使用的位置。我有一个简单的功能，如果你点击一个按钮，将出现一个div，它将向下滑动一点点。问题是滑动的动画有时会有些不稳定，但有时候很好。有没有办法在每次单击按钮时使动画变得平滑？

段

document.querySelector('div#ex2 button').onclick = function() {
  var counter;

  // shows the div
  document.querySelector('div#reveal').style.display = "block";

  // used to decrease bottom position
  var dec = 20;
  counter = setInterval(moveD, 10);

  // moves the div down
  function moveD() {
      dec -= 2;
      document.getElementById('reveal').style.bottom = dec + "px";
      if (dec < 1) {
        clearInterval(counter);
        log('function is done');
        document.getElementById('reveal').style.bottom = 0;
      } // moveD if
    } // function moveD


}; // onclick function

div#reveal {
  height: 100px;
  width: 300px;
  background: purple;
  padding: 5px;
  position: relative;
  bottom: 20px;
  display: none;
  color: white;
  text-align: center;
  vertical-align: center;
  margin: 10px 0;
}

<div id="ex2">
  <h2>Example 2</h2>
  <p></p>
  <h4>results:</h4>
  <button>Click it</button>
  <div id="reveal">This will be revealed</div>
</div>

Answer 1

我认为你可以诚实地使用CSS动画来解决你的问题。请记住，如果可能的话，你应该总是使用CSS来代替javascript。

w3schools link

具体来说（你可以滚动一下）有一个你感兴趣的animation-timing-function。

Answer 2

查看所有这些缓动功能：https://github.com/danro/jquery-easing/blob/master/jquery.easing.js。

如果您想查看它们的使用情况，请查看我的动画库http://nanimation.js.org/。

检查以获取有关功能及其参数的更多信息：jQuery easing function — variables' comprehension。

如何在javascript中为动画制作缓动功能？

2 个答案: