JQuery тумблер

Question

Скажем, мне нужен элемент для анимации при нажатии. Для этого я просто:

$('#header .icon').click(function() {
    $('#header form').animate({width:'195px'});
});

Но как бы мне сделать так, чтобы при повторном нажатии на элемент происходила противоположная анимация? (например, анимация по ширине: 0px;)

Answer 1

Вы можете использовать .toggle() следующим образом:

$('#header .icon').toggle(function() {
  $('#header form').animate({width:'195px'});
}, function() {
  $('#header form').animate({width:'0px'});
});

Если изначально было , вы можете переключать его ширину следующим образом:

$('#header .icon').click(function() {
  $('#header form').animate({width:'toggle'});
});

Answer 2

У меня была похожая проблема сегодня, и ни один из ответов здесь не решил ее для меня. Мое решение состояло в том, чтобы сохранять состояния, чтобы при нажатии одного и того же элемента происходили разные вещи:

var estado="big";
$(".snacks").click(function() {
    if(estado == "big"){
        $("#men_snacks").animate({width:"183px", height:"45px"}, 1000);
        return estado="small";
    } else if(estado == "small") {
        $("#men_snacks").animate({width:"82%",height:"550px"},1000);
        return estado="big";
    }
});