onmousedownを使用して簡単なアニメーションをトリガーする

Question

これは、ボタンを押したままで、要素（画像）を画面全体で左から右に移動する単純な機能です。

function moveRight() { 
    var element = document.getElementById("dragged"); 
    var position = document.getElementById("dragged").style.left; 
    if (position == 1175) 
    { 
    return false; 
    } 
    else 
    { 
    element.style.left = position + "1px"; 
    position++; 
    } 
} 

ボタンのコード：

<button type-"button" onmousedown="moveRight()" onmouseup="returnToCentre()" onclick="returnToCentre()"> Click me! 
</button> 

画像要素の初期位置：

left:20px; 
    bottom:6px; 

私はダウンボタンを押したままにすると、それはすぐに左に移動し、放出時それは中心に戻ります。私が間違っていることを教えてください。私は左の位置をアニメーションとして20ピクセルから1175ピクセルに変更し、一度に1ピクセルずつ変更します。 注：JSの新機能では、JQueryソリューションを使わずに簡単な回答をしてください。

Answer 1

if (position == 1175) 
    { 
     return false; 
    } 

このコードは実行されますか。あなたのコードを見ると、ポジションの価値は "1175px"のようなものに見えます。また、これについて：

element.style.left = position + "1px"; 

この文は2つの文字列を連結します。したがって、positionの値が5の整数の場合、element.style.leftは "51px"になります。私はあなたの問題の原因となっているデータフォーマットの不一致の可能性が高いと思います。コードを実行して、期待しているものではなく、何を得ているのかを見て、値を簡単にログアウトすることができます。