Question

我想使用转换从它的当前位置向右移动（left: 1000px）？我该怎么做并使用Javascript触发它？

Answer 1

检查以下fiddle

JS

 $(document).ready(function(){
    $("button").click(function(){
        $("div").animate({left: '250px'});
    });
});

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Start Animation</button>

<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>

<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>

Answer 2

你有什么尝试？

以下是使用vanilla js的简单示例：

var box = document.getElementById("box");

box.addEventListener("click", moveBox);

function moveBox() {
    box.classList.add("move");
}

#box {
  background-color:blue;
  height:150px;
  width:150px;
  left:0;
  transition:left .33s ease;
  position:relative;

}

#box.move {
  left:500px;
}

<div id="box">

</div>

这里是jsfiddle：https://jsfiddle.net/cx7n88s0/

要使用left，您需要设置相对位置或绝对位置。

在主要ID或类

上使用transition

如何使用转换从当前位置向右移动div？

2 个答案: