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

如果它最初是out，你可以像这样切换它的宽度:

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