從左到右移動div，然後停止

Question

你知道如何將div.move從左到右移動到每秒1px？當div到達.stop div時停止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); 
    } 
}