アニメーションその始点に戻る

Question

私は画像を前後に動かすための小さなプログラムを作った。今度は最初の求愛ボタンがうまくいきますが、画像はピクセル単位で右に動いていますが、私の後ろボタンボタンは機能しません。画像は元の位置に戻りません。なぜ誰かが助けてください何らかのアイデアを持っていますか？このお試しください

var jobbAnim = 1; 
 
var speed = 1; 
 
var balAnim = 400; 
 

 

 

 
function jobbra() { 
 

 

 

 
    if (jobbAnim < 400) { 
 
     jobbAnim = jobbAnim + speed; 
 
    } 
 

 

 
    document.getElementById("ilonakep").style.marginLeft = jobbAnim + "px"; 
 
    window.requestAnimationFrame(jobbra); 
 

 
} 
 

 

 
function balra() { 
 
    if (balAnim >= 400) { 
 

 
     balAnim = balAnim - speed; 
 
    } 
 
    document.getElementById("ilonakep").style.marginRight = balAnim + "px"; 
 
    window.requestAnimationFrame(balra); 
 
}

<div id="container"> 
 
    <div id="ilonakep"> 
 
     <img src="/img/ilona.jpg" alt="ilona"> 
 
    </div> 
 
</div> 
 
<p id="gombok"> 
 
    <button onclick="balra()">Balra</button> 
 
    <button onclick="jobbra()">Jobbra</button> 
 
</p>

Answer 1

をあなたがそうでなければ、新たなアニメーションを使用して、のいずれかをクリックするたびに開始されます、あなただけ一度に一つのアニメーションの再生を持っていることを確認するためにcancelAnimationFrameを使用する必要があります - よりここにチェックしてくださいボタン。また、マージンではなく、要素の位置をアニメートすることをお勧めします（または、より良い方法として、transform: translate();を使用することをお勧めします）。 CSSトランジションほど理想的ではありませんが、より直感的です。

var left = 0; 
 
var speed = 1; 
 
var anim; 
 

 
function jobbra() { 
 
    if (anim) { 
 
     window.cancelAnimationFrame(anim); 
 
    } 
 

 

 
    if (left < 400) { 
 
     left = left + speed; 
 
    } 
 

 
    document.getElementById("ilonakep").style.left = left + "px"; 
 
    anim = window.requestAnimationFrame(jobbra); 
 
} 
 

 

 
function balra() { 
 
    if (anim) { 
 
     window.cancelAnimationFrame(anim); 
 
    } 
 

 
    if (left > 0) { 
 
     left = left - speed; 
 
    } 
 

 
    document.getElementById("ilonakep").style.left = left + "px"; 
 
    anim = window.requestAnimationFrame(balra); 
 
}

<div id="container"> 
 
    <div id="ilonakep" style="position: relative; display: inline;"> 
 
     <img src="/img/ilona.jpg" alt="ilona"> 
 
    </div> 
 
</div> 
 
<p id="gombok"> 
 
    <button onclick="balra()">Balra</button> 
 
    <button onclick="jobbra()">Jobbra</button> 
 
</p>

Answer 2

ありがとう：純粋なCSSアニメーションを使用して

var jobbAnim = 1; 
var speed = 1; 
var balAnim = 400; 



function jobbra() { 



    if (jobbAnim < 400) { 
     jobbAnim = jobbAnim + speed; 
    } 


    document.getElementById("ilonakep").style.marginLeft = jobbAnim + "px"; 
    window.requestAnimationFrame(jobbra); 

} 


function balra() { 
    if (balAnim > 399) { 

     balAnim = balAnim - speed; 
    } 
    document.getElementById("ilonakep").style.marginLeft = balAnim + "px"; //This will reset the element to the left 
    document.getElementById("ilonakep").style.marginRight -= balAnim + "px"; //This will move it to the left 
    window.requestAnimationFrame(balra); 
} 
<div id="container"> 
    <div id="ilonakep"> 
     <img src="/img/ilona.jpg" alt="ilona"> 
    </div> 
</div> 
<p id="gombok"> 
    <button onclick="balra()">Balra</button> 
    <button onclick="jobbra()">Jobbra</button> 
</p> 

Answer 3

を、あなたは簡単にそれは同様に見える方法を変更することができます。 https://www.w3schools.com/css/css3_animations.asp

function addLeft() { 
 
    document.getElementById("container").classList.add("slideLeft"); 
 
} 
 
function addRight() { 
 
    document.getElementById("container").classList.add("slideRight"); 
 
}

.slideRight { 
 
    animation-name: slideRight; 
 
    animation-duration: 4s; 
 
    animation-fill-mode: forwards; 
 
} 
 
@keyframes slideRight { 
 
    from { 
 
     margin-left: 0; 
 
    } 
 
    to { 
 
     margin-left: 50%; 
 
    } 
 
} 
 

 
.slideLeft { 
 
    animation-name: slideLeft; 
 
    animation-duration: 4s; 
 
    animation-fill-mode: forwards; 
 
} 
 
@keyframes slideLeft { 
 
    from { 
 
     margin-left: 50%; 
 
    } 
 
    to { 
 
     margin-left: 0; 
 
    } 
 
}

<div id="container"> 
 
    <div id="ilonakep"> 
 
     <img src="/img/ilona.jpg" alt="ilona"> 
 
    </div> 
 
</div> 
 
<p id="gombok"> 
 
    <button onclick="document.getElementById('container').classList.add('slideLeft')">Balra</button> 
 
    <button onclick="document.getElementById('container').classList.add('slideRight')">Jobbra</button> 
 
</p>