切换可能性
简单的 toggle()
案例
function toggleBasic() {
$(".target1").toggle();
}
具体持续时间
function toggleDuration() {
$(".target2").toggle("slow"); // A millisecond duration value is also acceptable
}
……和回调
function toggleCallback() {
$(".target3").toggle("slow",function(){alert('now do something');});
}
……或者缓和和回调。
function toggleEasingAndCallback() {
// You may use jQueryUI as the core only supports linear and swing easings
$(".target4").toggle("slow","linear",function(){alert('now do something');});
}
……或者有多种选择**。**
function toggleWithOptions() {
$(".target5").toggle(
{ // See all possible options in: api.jquery.com/toggle/#toggle-options
duration:1000, // milliseconds
easing:"linear",
done:function(){
alert('now do something');
}
}
);
}
也可以使用幻灯片作为带有 slideToggle()
的动画
function toggleSlide() {
$(".target6").slideToggle(); // Animates from top to bottom, instead of top corner
}
…或通过 fadeToggle()
改变不透明度淡入/淡出
function toggleFading() {
$( ".target7" ).fadeToggle("slow")
}
…或用 toggleClass()
切换类
function toggleClass() {
$(".target8").toggleClass('active');
}
一个常见的情况是使用 toggle()
来显示一个元素而隐藏另一个元素(同一个类)
function toggleX() {
$(".targetX").toggle("slow");
}
以上所有例子都可以在这里找到