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");
}以上所有示例均可在此处找到