Question

您知道如何每秒将div.move从左移动到右1px吗？当div到达.stop div时停止div的移动？

<div class="content">
  <div class="stop">
    stop
  </div>
<div class="move">
</div>
</div>

<button id="go">
go
</button>


$( "#go" ).click(function() {
  $( ".move" ).animate({
    opacity: 0.25,
    left: "+=5000px",
    height: "toggle"
  }, 5000, function() {

  });

Answer 1

这是修改过的小提琴

https://jsfiddle.net/z2mjvbss/6/

您可以通过修改left的最终值来停止在特定位置。

备份代码

$( "#go" ).click(function() {
  $( ".move" ).animate({
    opacity: 0.25,
    left: "200px",
  }, 5000, function() {

  });
});

Answer 2

将您的JS代码更改为以下

$( "#go" ).click(function() {
  var stop = $(".stop").offset().left;
  $( ".move" ).animate({
     opacity: 0.25,
     left: stop-($(".stop").width()+$(this).width()),
     height: "toggle"
   }, 5000, function() {}
  );
});

你的CSS

.content {
    width: 500px;
    height: 500px;
    margin: 10px;
    border: 10px solid green;
    background:yellow;
    overflow-x:scroll;
    padding:10px;
    position: relative;
}

.stop{
  float:right;
  background:brown;
}

.move{
  left:0;
  background:brown;
  height:100%;
  width:10px;
  opacity:0.2;
  position: absolute;
}

<强> Fiddle

Answer 3

你可以试试......

HTML

#import "RNCryptor/RNCryptor.h"

CSS

<div class="content">
  <div class="stop">
    stop
  </div>
  <div class="move">
    move
  </div>
</div>

<button id="go">
  go
</button>

JS

.content{float:left; width:100%;background:#FFFFFF;}
.move{float:left;width:100px;background:black;color:white;}
.stop{float:right;width:100px;background:red;}

Answer 4

您可以使用requestanimationframe实现它。下面的文章将通过一个示例对其进行更多说明。在这里，它移动了7px，但是您可以将其更改为1px。

https://link.medium.com/JrgbH9gdf8

将div从左向右移动然后停止

4 个答案: