Создание эффекта Toggle в Javascript

Я только начинаю узнавать о Javascript для анимации. Я создал этот супер простой пример, который при нажатии перемещает 3 блока из центральной позиции, в верхнюю, верхнюю и верхнюю правую позицию (я создаю нечто вроде типа типа кнопки контекстного действия). Но теперь я хотел бы снова щелкнуть, и если анимация «вне», то она будет выполняться в обратном порядке. Я попытался добавить if else, используя параметр elem1.style.bottom == 350, чтобы определить, будет ли pos увеличиваться или уменьшаться, но это не сработало. Точно так же я не смог получить логическое значение clicked, чтобы оно сохранялось между щелчками.Создание эффекта Toggle в 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 == "350 пикселей") {...} еще {...:

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

Создание эффекта Toggle в Javascript

ответ

Смежные вопросы