JQuery анимация при нажатии

Question

Я вызывал несколько анимаций, которые происходят при нажатии кнопки. Я хочу переключить эти анимации, чтобы элементы возвращались к исходным позициям при повторном нажатии.

Вот мой сценарий:

$("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); 
}); 

Как вы можете видеть, три анимации происходит. Какое выражение if/else необходимо ввести в действие, чтобы создать обратимую анимацию?

Вот jsfiddle: http://jsfiddle.net/6arjhkzc/2/

Answer 1

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

магазин 1 или 0 внутри щелкнутой кнопку io собственности (используется как Boolean, так как 0 вычисляется как false).
Чем можно использовать некоторые условные операторы ?:, вы можете переключать требуемые значения.

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

Если вы не комфортабельный с оператором побитовое исключающее ^, как Toggler, вы всегда можете использовать стандартный кувырканье отрицанием (demo):

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