要素を無限に上下に移動するためにJQueryのアニメーションを使用します

Question

今、私はtop:0pxからtop:200pxにラインイメージを移動する次のJQuery .animateコマンドを持っています。私はrepetativly、infinitly、200pxに、その上0pxに200pxバックからライン画像をアニメーション化するにはどうすればよい

$("#scanner").animate({ top: '200px' }, 2000); 

？

（明確にするため、アニメーションはバーコードスキャナのようなものです）。成功コールバックとして

Answer 1

設定を

function topInc(){ 
    $("#scanner").animate({ top: '200px' }, 2000, topDec); 
} 

function topDec(){ 
    $("#scanner").animate({ top: '0' }, 2000, topInc); 
} 

topInc(); 

Answer 2

誰かがそれを必要とする場合には、CSSのソリューションは次のようになります。ボーナスとして

.scan-box { 
 
    position: relative; 
 
    width: 200px; 
 
    height: 200px; 
 
    border: 1px solid black; 
 
} 
 

 
#scanner { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 10px; 
 
    background: none rgba(255, 0, 0, .5); 
 
    animation: scanning 3s linear infinite; 
 
} 
 

 
@keyframes scanning { 
 
    0% { 
 
     top: 0; 
 
    } 
 
    50% { 
 
     top: calc(100% - 10px); 
 
    } 
 
    100% { 
 
     top: 0; 
 
    } 
 
}

<div class="scan-box"> 
 
    Scanning... 
 
    <div id="scanner"></div> 
 
</div>

、いくつかのカスタマイズを行うことができます追加のスタイルや使用を使用してCSS Variables：

上

:root { 
 
    --data-from: 0; 
 
    --data-to: 100%; 
 
} 
 

 
.scan-box { 
 
    position: relative; 
 
    width: 150px; 
 
    height: 150px; 
 
    border: 1px solid black; 
 
    float: left; 
 
    margin: 0 10px 10px 0; 
 
} 
 

 
.scanner { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 10px; 
 
    background: none rgba(255, 0, 0, .5); 
 
    animation: scanning 3s linear infinite; 
 
} 
 

 
.scanner-ease-in-out { 
 
    animation: scanning 3s ease-in-out infinite; 
 
} 
 

 
@keyframes scanning { 
 
    0% { 
 
     top: var(--data-from); 
 
    } 
 
    50% { 
 
     top: calc(var(--data-to) - 10px); 
 
    } 
 
    100% { 
 
     top: var(--data-from); 
 
    } 
 
}

<div class="scan-box"> 
 
    Scanning... 
 
    <div class="scanner"></div> 
 
</div> 
 

 
<div class="scan-box"> 
 
    Scanning... 
 
    <div class="scanner scanner-ease-in-out"></div> 
 
</div> 
 

 
<div class="scan-box"> 
 
    Scanning... 
 
    <div class="scanner" style="--data-from:25%;--data-to:75%"></div> 
 
</div>

も。