Jquery animation on click

Question

I have called several animations to occur when a button is clicked. I want to toggle these animations, so that the elements return to their starting positions when clicked for a second time.

Here is my script:

$("span.click").click(function() {
  $(".map").animate(
    {"opacity": "1"}, 200);
});

$("span.click").click(function() {
  $(".navigation").animate(
    {"bottom": "-100px"}, 200);
});

$("span.click").click(function() {
  $(".click").animate(
    {"bottom": "150px"}, 200);
});

As you can see, three animations are occurring. What sort of if/else statement needs to be put into place in order to create reversible animations?

Here is a jsfiddle: http://jsfiddle.net/6arjhkzc/2/

Don't you find this example somewhat simpler (to start from) http://jsfiddle.net/6arjhkzc/3/ — Roko C. Buljan, Aug 14 '15 at 14:42
Hold booleans which represent the current state, and check if it was animated each time. if it was, do the reverse. :) — A. Abramov, Aug 14 '15 at 14:43
@RokoC.Buljan I just separated each function to clearly lay it out. — Austin Branham, Aug 14 '15 at 14:45
@A.Abramov I'm very new to query so I'm not sure how to do that at all — Austin Branham, Aug 14 '15 at 14:45
@AustinBranham Roko's answer is exacly what I said. Learn from it. :) — A. Abramov, Aug 14 '15 at 14:46

score 4 · Accepted Answer · edited May 23 '17 at 10:26

4

jsfiddle demo

$(document).ready(function() {
    $("span.click").click(function() {

        var io = this.io ^= 1; // Simple I/O toggler

      $(".map").animate({"opacity": io ? 1 : 0}, 200);
      $(".navigation").animate({"bottom": io ? -100 : -150}, 200);
      $(".click").animate({"bottom": io ? 150 : 100}, 200);
    });
});

store 1 or 0 inside the clicked button io property (used as Boolean since 0 evaluates as false).
Than using some Conditional Operator ?: you can toggle the desired values.

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator
https://stackoverflow.com/a/22061240/383904

If you're not confortable with the bitwise XOR operator ^ as toggler, you can always use a standard flip-flap negation (demo):

var io = this.io = !this.io;

edited May 23 '17 at 10:26

Community

1
1

answered Aug 14 '15 at 14:45

Roko C. Buljan

196,159
39
305
313

How can you do a css transformation with this IO toggler? Say if I wanted to scale something up on click, I've tried this code but it does not work: $(this).animate({"transform","scale": io ? 1 : 1.5}, 100); – Austin Branham Sep 11 '15 at 15:59
@AustinBranham almost like that, you have just a typo (missing `:` instead of `,`), Also, **animation does not apply to CSS transform. use CSS instead!!!** also in CSS it's like `scale(1.5)` so in jQuery it's the same: `$(this).css({transform : "scale("+ (io ? 1 : 1.5) +")" }, 100);` >> note the `:` and how I embraced the io stuff into `()` using string concatenation +. Also note that 100 is a really quick animation, I'd suggest to use min 230 for a better UX – Roko C. Buljan Sep 11 '15 at 16:40
Thank you very much. I had also tried several combinations with CSS instead of animation, but couldn't get it to work. That makes sense how io is embraced within the parentheses. If you don't mind answering, what are the function of the + signs outside of the io? String concatenation? – Austin Branham Sep 11 '15 at 18:05
1

@AustinBranham Yes. When concatenating Strings with JS code, if you're a beginner first write the expected string: `"scale()"` than if you need a variable inside the () than write: `"scale("+ someThing +")"` now you've concatenated `someThing` variable withing the strings. If you need instead of `someThing` to do more advanced stuff, to avoid messing with + as cncatenator and + as addition simply wrap your logic inside `()` like `"scale("+ (a+b-c) +")"` or as we need to: `"scale("+ ( io ? 1 : 1.5 ) +")"` using a Conditional operator (?:) – Roko C. Buljan Sep 11 '15 at 18:10
is there a way to use the io toggler with percentage based values. For example: changing an absolutely positioned elements left or right positioning: $("example").css({"left": io ? 0% : 100%}, 230); – Austin Branham Oct 01 '15 at 23:12
1

@AustinBranham yes, simply use quotes: `io ? "0%" : "100%"` – Roko C. Buljan Oct 01 '15 at 23:37
Yes, I realized that immediately after asking the question. Thanks again, you've been a big help. – Austin Branham Oct 01 '15 at 23:42

Jquery animation on click

1 Answers1