Javascript'te Toggle efekti oluşturma

Animasyon için Javascript hakkında bilgi almaya yeni başlıyorum. Bu süper basit örneği oluşturdum; tıklandığında, 3 blok bir merkezi konumdan üst, sol üst ve sağ üst konuma geçiyor (bir tür Bağlamsal Eylem düğmesi türünde bir şey yapıyorum). Ama şimdi tekrar tıklayabilmeyi isterdim ve eğer animasyon "dışarıda" ise, o zaman tersi olarak çalışır. Pos artış veya azaltma olup olmadığını tanımlamak için elem1.style.bottom == 350 parametresini kullanarak if else eklemeyi denedim, ancak çalışmadı. Benzer şekilde, tıklamalar arasında devam etmek için clicked boolean alamadım.Javascript'te Toggle efekti oluşturma

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'; 
    } 
    } 
}

nasıl bunu başarmak ki?

kaynak

2016-04-06 George Edwards

'if (elem1.style.bottom == '350px')' türünü kullanmanız gerekir. – Barmar

Gönderdiğiniz kodda bahsettiğiniz "if" ifadesini göremiyorum. – Barmar

@Barmar [İşte] (http://jsfiddle.net/k73d89vy/4/) denediğim şey türüne bir bağlantı –

Bunun istediğini düşünüyorum: http://jsfiddle.net/3pvwaa19/20/

Bu animasyon oldu olmadığına takip etmek için bir değişken oluşturur

ve aynı konuma pos değişken hamle - - dışını ana fonksiyonunun, böylece değerler her tıklamadan sonra kaybolmaz:

var moved = false; 
var pos = 175;

kaynak

2016-04-06 22:43:30

Evet, bunu yapabilirsiniz ile if (elem1.style.bottom == "350px") {...} else {...:

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'; 
     } 
    } 
    } 
}

kaynak

2016-04-06 23:53:52 msclsr

Javascript'te Toggle efekti oluşturma

cevap

İlgili konular