переместить div слева направо, а затем остановить

Question

Знаете ли вы, как переместить div.move слева направо 1px в секунду? И остановить движение div, когда div прибывает в .stop div?

https://jsfiddle.net/z2mjvbss/4/

<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

Изменить код 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 2

Вот Модифицированный скрипку

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

Вы можете остановить его в определенном месте путем изменения конечного значения left.

Код для резервного копирования

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

    }); 
}); 

Answer 3

Вы можете попробовать это ......

HTML

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

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

CSS

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

JS

$("#go").on("click",function(){ 
    goOnePixelRight(); 
}); 
function goOnePixelRight(){ 
    var top=$(".move").offset().top; 
    var left=$(".move").offset().left; 
    $(".move").offset({top:top,left:left+1}); 
    if(parseInt($(".move").offset().left)!=parseInt($(".stop").offset().left)){ 
     setTimeout("goOnePixelRight();",1000); 
    } 
}