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

jQuery切换点击

2 个答案: