Question

这里我有一个很好的例子，我正在寻找https://stackoverflow.com/a/30927145/6188148

MatOfKeyPoint.put(0, 0, yourFloatArray)

但是开发div扩展动画的人使用了巨大的css，但我想知道如何使用jquery代码来做同样的事情，其中div将从页面中心扩展。请发布带有示例代码的jsfiddle链接。

Answer 1

$(function(){
  function animate(percent){
    $( "#expander" ).animate({
      width: percent
    }, 1000);
  }
  animate("50%");
  animate("100%");
});

#expander {
  position:absolute;
  height:1px;
  border-top: 1px solid red;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="expander"></div>

Answer 2

您可以使用$.animate()为width设置动画。如果你想要类似的时间，你可以使用2个动画，或者你可以只使用1个动画并转到width: 100%

$('div').animate({
  width: '50%'
},500).animate({
  width: '100%'
},500);

div {
  position: absolute;
  top: 50%;
  left: 50%;
  background: black;
  border-top: 2px solid black;
  transform: translate(-50%,-50%);
  width: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>

Jquery：如何从页面中心展开div

2 个答案: