Question

我希望动画从元素当前宽度和高度值开始，如果当前元素有宽度：225px和高度：225px我想从该值开始动画并将此值减小到45px

为什么如果我们用animate（）替换velocity（）函数，动画就是我想要的

JS：

$("#play-velocity").on('click', function(){
 $("#with-velocity").velocity({
    width: "45px",
    height: "45px"

  }, {
    duration: 2000
  });
});

CSS：

#with-velocity {
  display:block;
  padding: 12px 12px;
  background-color:red;
  width:225px;
  height:225px;
}

JSFIDDLE

任何帮助将不胜感激

由于

Answer 1

如果您仍需要解决此问题。

我想我找到了你的问题的原因，不幸的是，如果没有一些让步，我无法修复它。显然是语法

$("#with-velocity").velocity({
    width: "45px",
    height: "45px"
}

您在小提琴中使用的 Velocity.js 版本不支持或更改

- 2.0.2 ，这是我能找到的下一个最新版本可以使用这样的语法是 1.5.1 。

我无法找到2.0.2相当于按预期更改宽度，我希望这可以帮助您进行搜索。

$("#play-velocity").on('click', function(){
  $("#with-velocity").velocity({
    width: "45px",
    height: "45px"

  }, {
    duration: 3350
  });
});

#with-velocity {

  display:block;
  padding: 12px 12px;
  background-color:red;
width:225px;
height:225px;
}

#with-velocit {
  color: #AAB2BD;
  font-family: "Roboto", Arial, sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  text-decoration: none;
  display: block;
  width:50px;
  margin-bottom: 30px;
  border-radius: 30px;
  margin-right: auto;
  margin-left: auto;
}
#play-velocity {
  display:inline-block;
  margin-top:.5em;
  padding:10px;
  border:2px solid green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.1/velocity.min.js"></script>
<div id="with-velocity">   
  </div>
  <a href="#" id="play-velocity"><span class="ion ion-play"></span> Play</a>

Velocity.js |宽度动画从0px开始，而不是从元素当前值开始

1 个答案: