jQuery 切换可能性

示例

简单的toggle()情况

function toggleBasic() {
  $(".target1").toggle();
}

有特定的持续时间

function toggleDuration() {
  $(".target2").toggle("slow"); // 毫秒持续时间值也是可以接受的
}

...和回调

function toggleCallback() {
  $(".target3").toggle("slow",function(){alert('now do something');});  
}

...或使用缓动和回调。

function toggleEasingAndCallback() {
  // 您可以使用jQueryUI，因为核心仅支持线性和摆动缓动
  $(".target4").toggle("slow","linear",function(){alert('now do something');});  
}

...或具有多种选择。

function toggleWithOptions() {
  $(".target5").toggle(
    { // 查看以下所有可能的选项：api.jquery.com/toggle/#toggle-options
      duration:1000, // 毫秒
      easing:"linear",
      done:function(){
        alert('now do something');
      }
    }
  );  
}

也可以将幻灯片用作动画slideToggle()

function toggleSlide() {
  $(".target6").slideToggle(); // 从上到下而不是上角动画
}

...或通过更改不透明度来淡入/淡出 fadeToggle()

function toggleFading() {
  $( ".target7" ).fadeToggle("slow")
}

...或使用 toggleClass()

function toggleClass() {
  $(".target8").toggleClass('active');
}

一种常见的情况是使用toggle()以显示一个元素而隐藏另一个元素（同一类）

function toggleX() {
  $(".targetX").toggle("slow");  
}

以上所有示例均可在此处找到