jQuery切换点击 [英] jQuery toggle click

问题描述

说我点击时需要一个动画元素。要做到这一点，我只是：

  $（'＃header .icon'）点击（function（）{
 $（'＃header form'）。animate（{width：'195px'}）; 
}）; 
  

但是，如何让我再次点击元素，相反的动画就会发生？ （例如，动画宽度：0px;）

解决方案

您可以使用 .toggle（） 像这样：

<$ p $ {code $ $（'＃header .icon'）。toggle（function（）{
$（'＃header form'）。animate（{width：'195px'}）;
}，function（）{
$（'＃header form'）。animate（{width：'0px'}）;
}）;

如果是最初的，你可以这样切换它的宽度： / p>

  $（'＃header .icon'）。click（function（）{
 $（'＃header form' ）.animate（{width：'toggle'}）; 
}）; 
  

Say I need an element to animate when clicked. To do this I just:

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

But how would I make it so that when I click the element again the opposite animate takes place? (e.g. animate to width: 0px; )

解决方案

You can use .toggle() like this:

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

If it was initially out you could toggle it's width like this:

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

这篇关于jQuery切换点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！