javascript - Onclick事件将元素向下移动特定数量的像素

我知道一些有关HTML和CSS的知识，但我想构建代码，以在单击后将元素移动一定数量的像素，然后在再次单击后将其返回。

我拥有的两个网站是：
http://www.miguelonenterprises.com/2018roadtrip.htm
http://www.miguelonenterprises.com/wrap6.css。

现在，我将其设置为悬停属性。

我发现此网站可能具有答案：http://jsfiddle.net/fgvr2/] 1

$(function(){
    $('.box').on('click',function(){
       $(this).toggleClass('clicked');
    });
});

而且我可以很好地集成CSS和HTML。但是我不知道如何集成JavaScript / JQuery元素。

任何帮助将不胜感激。

谢谢。

最佳答案

单击toggle时，您可以element一个类，这将使element降低特定数量的像素。您还需要为属性添加一个transition-duration，该属性应在更改时开始过渡（在本例中为top）。

$(function(){
    $('.movingBox').on('click',function(){
       $(this).toggleClass('clicked');
    });
});

.movingBox{
  background-color: green;
  width: 100px;
  height: 100px;
  position: fixed;
  border: 1px solid red;
  top: 10px;
  transition: top 1s;
}

.clicked{
  position: fixed;
  top: 100px;/*whatever number of pixels you want the div to be from the top of the page*/
}

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