Creating Toggle effect in Javascript

Question

I am just starting to learn about Javascript for animation. I have created this super simple example, which when clicked moves 3 blocks from a central position, to top, top-left and top-right position (I am building up to a sort of Context Action button type thing). But I would now like to be able to click again and if the animation is "out", then it will execute in reverse. I tried adding an if else, using the elem1.style.bottom == 350 parameter to define whether pos would increment or decrement, but it didn't work. Similarly, I was unable to get a clicked boolean to persist between clicks.

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

How would I achieve this?

I don't see the if statement you're talking about in the code you posted. — Barmar
– Barmar, Commented Apr 6, 2016 at 22:24
@Barmar I am hoping to get a working solution. I don't think that approach is the right way to approach the problem, so If possible I would prefer something based on my code already in the question. — George Edwards
– George Edwards, Commented Apr 6, 2016 at 22:32

Scott Marcus · Accepted Answer · 2016-04-06 22:43:30Z

1

I think this is what you want: http://jsfiddle.net/3pvwaa19/20/

It creates a variable to keep track of whether the animation has happened and it moves your pos variable to the same location - - outside of the main function, so that the values won't get lost after each click:

var moved = false;
var pos = 175;

answered Apr 6, 2016 at 22:43

Scott Marcus

66k6 gold badges54 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

msclsr · Accepted Answer · 2016-04-06 23:53:52Z

Yes, you can do it with 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'; 
      }
    }
  } 
}

Collectives™ on Stack Overflow

Creating Toggle effect in Javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related