Javascriptでトグル効果を作成する

アニメーションのためのJavascriptについて学び始めました。私はこの非常に簡単な例を作成しました。これをクリックすると、中央の位置から上、左上、右上の位置に3ブロック移動します（私は一種のContext Actionボタンタイプのものまで構築しています）。しかし、私は今再びクリックすることができますし、アニメーションが「出ている」場合は逆に実行します。私はif elseを追加しようとしましたが、elem1.style.bottom == 350パラメータを使用して、posが増減するかどうかを定義しましたが、機能しませんでした。同様に、私はclickedブール値をクリック間に持続させることができませんでした。Javascriptでトグル効果を作成する

JSFiddle

HTML：

<body> 

<p> 
<button onclick="myMove()">Click Me</button> 
</p> 

<div id ="container"> 
<div id ="animate1"></div> 
<div id ="animate2"></div> 
<div id ="animate3"></div> 
</div> 

</body>

CSS：

#container { 
    width: 400px; 
    height: 400px; 
    position: relative; 
    background: yellow; 
} 
#animate1 { 
    width: 50px; 
    height: 50px; 
    left: 175px; 
    bottom: 175px; 
    position: absolute; 
    background-color: red; 
    z-index:3; 
} 
#animate2 { 
    width: 50px; 
    height: 50px; 
    left: 175px; 
    bottom: 175px; 
    position: absolute; 
    background-color: blue; 
} 
#animate3 { 
    width: 50px; 
    height: 50px; 
    left: 175px; 
    bottom: 175px; 
    position: absolute; 
    background-color: green; 
}

Javascriptを：

function myMove() { 
    var elem1 = document.getElementById("animate1"); 
    var elem2 = document.getElementById("animate2"); 
    var elem3 = document.getElementById("animate3"); 
    var start = 350; 
    var pos = 175; 
    var id = setInterval(frame, 5); 
    var clicked = false; 
    function frame() { 
    if (pos == 350) { 
     clearInterval(id); 
     clicked = !clicked; 
    } else { 
     if (clicked == false){ pos++; } else { pos--;} 
     elem1.style.bottom = pos + 'px'; 
     elem1.style.left = start - pos + 'px'; 
     elem2.style.bottom = pos + 'px'; 
     elem2.style.left = pos + 'px'; 
     elem3.style.bottom = pos + 'px'; 
    } 
    } 
}

どのように私はこれを達成するであろうか？

出典

2016-04-06 George Edwards

'if（elem1.style.bottom == '350px'）'を使う必要があります。 – Barmar

あなたが投稿したコードであなたが話している 'if'ステートメントが表示されません。 – Barmar

@Barmar [Here's]（http://jsfiddle.net/k73d89vy/4/）私が試しているようなものへのリンク –

私は、これはあなたが欲しいものだと思う：http://jsfiddle.net/3pvwaa19/20/

それはアニメーションが起こっていると、それは同じ場所にpos変数を移動するかどうかを追跡するための変数を作成します - - 主な機能の外に、なるように値が各クリック後に迷子にしません。

var moved = false; 
var pos = 175;

出典

2016-04-06 22:43:30

はい、あなたがそれを行うことができますしている場合（elem1.style.bottom == "350px"）{...}他に{...：

function myMove() { 
    var elem1 = document.getElementById("animate1"); 
    var elem2 = document.getElementById("animate2"); 
    var elem3 = document.getElementById("animate3"); 
    if (elem1.style.bottom == "350px"){ 
    var start = 175; 
    var pos = 350; 
    var id = setInterval(frame, 5); 
    function frame() { 
     if (pos == 175) { 
     clearInterval(id); 
     } else { 
     pos--; 
     elem1.style.bottom = pos + 'px'; 
     elem1.style.left = 2*start - pos + 'px'; 
     elem2.style.bottom = pos + 'px'; 
     elem2.style.left = pos + 'px'; 
     elem3.style.bottom = pos + 'px'; 
     } 
    } 
    } else { 
    var start = 350; 
    var pos = 175; 
    var id = setInterval(frame, 5); 
    function frame() { 
     if (pos == 350) { 
     clearInterval(id); 
     } else { 
     pos++; 
     elem1.style.bottom = pos + 'px'; 
     elem1.style.left = start - pos + 'px'; 
     elem2.style.bottom = pos + 'px'; 
     elem2.style.left = pos + 'px'; 
     elem3.style.bottom = pos + 'px'; 
     } 
    } 
    } 
}

出典

2016-04-06 23:53:52 msclsr

Javascriptでトグル効果を作成する

答えて

関連する問題