欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

jQuery 效果 - toggle slideToggle() 方法 slideUp() 渐渐隐藏方法 slideDown() 渐渐显示方法 有大用

shiping1 的头像

在 jQuery 中,.toggle() 方法曾经用于切换元素的可见性并可以与动画效果结合使用(但在 jQuery 1.9 版本后被弃用),但更现代且仍在维护的替代方案是 .slideToggle().fadeToggle(), 或者 .animate() 结合 .toggle() 事件来实现类似功能。

  • .slideToggle(): 按照滑动(slide)动画的方式切换元素的显示和隐藏状态。

Javascript
1$('#myElement').slideToggle();
  • .fadeToggle(): 按照淡入淡出(fade)动画的方式切换元素的显示和隐藏状态。

Javascript
1$('#myElement').fadeToggle();

如果你想自定义动画效果,可以使用 .animate() 方法配合条件判断来自定义切换行为:

Javascript
1// 假设我们定义一个自定义切换动画 2var isShown = true; 3$("#myElement").click(function() { 4    if (isShown) { 5        $(this).slideUp(500); // 隐藏时执行滑上动画 6        isShown = false; 7    } else { 8        $(this).slideDown(500); // 显示时执行滑下动画 9        isShown = true; 10    } 11});

以上示例中,slideUp() 和 slideDown() 分别用于隐藏和显示元素,同时带有 500 毫秒的动画时间。通过变量 isShown 来追踪元素当前是否显示,并据此决定执行哪种动画。



在 jQuery 中,可以使用 toggle() 方法来切换元素的可见性。如果元素当前是可见的,toggle() 方法将隐藏元素;如果元素当前是隐藏的,toggle() 方法将显示元素。

如果您想要在切换可见性时添加动画效果,可以使用 fadeIn()fadeOut()slideToggle() 等方法。以下是一个示例,使用 slideToggle() 方法实现切换动画效果:

javascript复制代码

$(document).ready(function() {

$("#toggleButton").click(function() {

$("#myElement").slideToggle();

});

});

在上面的示例中,当用户点击 ID 为 toggleButton 的按钮时,ID 为 myElement 的元素将切换其可见性,并使用滑动动画效果。



jQuery 效果参考手册

实例

通过使用滑动效果,在显示和隐藏状态之间切换 <p> 元素:

$(".btn1").click(function(){
  $("p").slideToggle();
});

亲自试一试

定义和用法

slideToggle() 方法通过使用滑动效果(高度变化)来切换元素的可见状态。

如果被选元素是可见的,则隐藏这些元素,如果被选元素是隐藏的,则显示这些元素。

语法

$(selector).slideToggle(speed,callback)
参数描述
speed

可选。规定元素从隐藏到可见的速度(或者相反)。默认为 "normal"。

可能的值:

  • 毫秒 (比如 1500)

  • "slow"

  • "normal"

  • "fast"

在设置速度的情况下,元素在切换的过程中,会逐渐地改变其高度(这样会创造滑动效果)。

callback

可选。toggle 函数执行完之后,要执行的函数。

如需学习更多有关 callback 的内容,请访问我们的 jQuery Callback 这一章。

除非设置了 speed 参数,否则不能设置该参数。

提示和注释

提示:如果元素已经隐藏,则该效果不产生任何变化,除非规定了 callback 函数。

亲自试一试 - 实例

jQuery 效果参考手册

 

 

实例

以滑动方式渐渐 慢慢隐藏

以滑动方式隐藏 <p> 元素:

$(".btn1").click(function(){
  $("p").slideUp();
});

定义和用法

通过使用滑动效果,隐藏被选元素,如果元素已显示出来的话。

语法

$(selector).slideUp(speed,callback)
参数描述
speed

可选。规定元素从可见到隐藏的速度(或者相反)。默认为 "normal"。

可能的值:

  • 毫秒 (比如 1500)

  • "slow"

  • "normal"

  • "fast"

在设置速度的情况下,元素从可见到隐藏的过程中,会逐渐地改变其高度(这样会创造滑动效果)。

callback

可选。slideUp 函数执行完之后,要执行的函数。

如需学习更多有关 callback 的内容,请访问我们的 jQuery Callback 这一章。

除非设置了 speed 参数,否则不能设置该参数。

提示和注释

提示:如果元素已经隐藏,则该效果不产生任何变化,除非规定了 callback 函数。

亲自试一试 - 实例

jQuery 效果参考手册

 

 

实例

以滑动方式显示隐藏的 <p> 元素:

$(".btn2").click(function(){
  $("p").slideDown();
});

亲自试一试

定义和用法

slideDown() 方法通过使用滑动效果,显示元素。

语法

$(selector).slideDown(speed,callback)
参数描述
speed

可选。规定元素从隐藏到可见的速度(或者相反)。默认为 "normal"。

可能的值:

  • 毫秒 (比如 1500)

  • "slow"

  • "normal"

  • "fast"

在设置速度的情况下,元素从隐藏到可见的过程中,会逐渐地改变其高度。

callback

可选。slideDown 函数执行完之后,要执行的函数。

如需学习更多有关 callback 的内容,请访问我们的 jQuery Callback 这一章。

除非设置了 speed 参数,否则不能设置该参数。

提示和注释

提示:如果元素已经是完全可见,则该效果不产生任何变化,除非规定了 callback 函数。

注释:该效果适用于通过 jQuery 隐藏的元素,或在 CSS 中声明 display:none 的元素(但不适用于 visibility:hidden 的元素)。

亲自试一试 - 实例

来自 http://www.w3school.com.cn/jquery/effect_slidetoggle.asp

 

 

jquery学习积累--之jquery(隐藏,显示,渐入渐出,变换)

/**
*@ Date         2010.07.15
*@ Author       狼
*@ Email       
*@ QQ          
*@ 博客         http://hi.baidu.com/1317983530/home
*/

/**
*jquery隐藏,显示
*/
$("input:first").click(function(){
$("p").hide();//隐藏
});

$("input:last").click(function(){
$("p").show();//显示
});
//有两个input类型都是buttom,以上是,当点击第一个按钮是,隐藏p标记,第二个则显示p标记
/**
*jquery渐入渐出,变换 //加上时间,则会有渐入渐出效果
*/
$("p").hide(3000);//隐藏
$("p").show(3000);//显示

$("img").slideUp(3000);//图片将逐渐隐藏
$("img").slideDown(3000);//图片将逐渐显示

$("img").fadeOut(3000);//图片将逐渐隐藏
$("img").fadeIn(3000);//图片将逐渐显示
 

jQuery 效果 - fadeOut() 方法

实例

使用淡出效果来隐藏一个 <p> 元素:

$(".btn1").click(function(){
  $("p").fadeOut();
});

亲自试一试

定义和用法

fadeOut() 方法使用淡出效果来隐藏被选元素,假如该元素是隐藏的。

语法

$(selector).fadeOut(speed,callback)
参数描述
speed

可选。规定元素从可见到隐藏的速度。默认为 "normal"。

可能的值:

  • 毫秒 (比如 1500)

  • "slow"

  • "normal"

  • "fast"

在设置速度的情况下,元素从可见到隐藏的过程中,会逐渐地改变其透明度(这样会创造淡出效果)。

callback

可选。fadeOut 函数执行完之后,要执行的函数。

如需学习更多有关 callback 的内容,请访问我们的 jQuery Callback 这一章。

除非设置了 speed 参数,否则不能设置该参数。

提示和注释

提示:如果元素已经隐藏,则该效果不产生任何变化,除非规定了 callback 函数。

亲自试一试 - 实例

jQuery 效果参考手册
来自  http://www.w3school.com.cn/jquery/effect_fadeout.asp

 

jQuery 效果 - fadeIn() 方法

实例

使用淡入效果来显示一个隐藏的 <p> 元素:

$(".btn2").click(function(){
  $("p").fadeIn();
});

亲自试一试

定义和用法

fadeIn() 方法使用淡入效果来显示被选元素,假如该元素是隐藏的。

语法

$(selector).fadeIn(speed,callback)
参数描述
speed

可选。规定元素从隐藏到可见的速度。默认为 "normal"。

可能的值:

  • 毫秒 (比如 1500)

  • "slow"

  • "normal"

  • "fast"

在设置速度的情况下,元素从隐藏到可见的过程中,会逐渐地改变其透明度(这样会创造淡入效果)。

callback

可选。fadeIn 函数执行完之后,要执行的函数。

如需学习更多有关 callback 的内容,请访问我们的 jQuery Callback 这一章。

除非设置了 speed 参数,否则不能设置该参数。

提示和注释

提示:如果元素已经显示,则该效果不产生任何变化,除非规定了 callback 函数。

注释:该效果适用于通过 jQuery 隐藏的元素,或在 CSS 中声明 display:none 的元素(但不适用于 visibility:hidden 的元素)。

亲自试一试 - 实例

 

来自 http://www.w3school.com.cn/jquery/effect_fadein.asp

 

普通分类: