javascript代码实例教程-jQuery 自学笔记―9 常见特效 (终章)

发布时间:2019-02-28 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-jQuery 自学笔记―9 常见特效 (终章)脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。 隐藏、显示、切换,滑动,淡入淡出,以及动画

 

效果演示

点击这里,隐藏/显示面板

 

一寸光阴一寸金,因此,我们为您提供快捷易懂的学习内容。

 

在这里,您可以通过一种易懂的便利的模式获得您需要的任何知识。

 

实例

jQuery hide()

演示一个简单jquery hide() 方法。

jQuery hide()

另一个 hide() 演示。如何隐藏部分文本。

jQuery hide() 和 show()

通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素:

 

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

  $("p").hide();

});

 

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

  $("p").show();

});

亲自试一试

 

语法:

$(selector).hide(sPEed,callback);

 

$(selector).show(speed,callback);

可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。

 

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

 

下面的例子演示了带有 speed 参数的 hide() 方法:

 

实例

$("button").click(function(){

  $("p").hide(1000);

});

亲自试一试

 

jQuery toggle()

通过 jQuery,您可以使用 toggle() 方法来切换 hide() 和 show() 方法。

 

显示被隐藏的元素,并隐藏已显示的元素:

 

实例

$("button").click(function(){

  $("p").toggle();

});

亲自试一试

 

语法:

$(selector).toggle(speed,callback);

可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。

 

可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。

 

===================================================================================================================================

 

通过 jQuery,您可以实现元素的淡入淡出效果。

 

效果演示

点击这里,隐藏/显示面板

 

一寸光阴一寸金,因此,我们为您提供快捷易懂的学习内容。

 

在这里,您可以通过一种易懂的便利的模式获得您需要的任何知识。

 

实例

jQuery fadein()

演示 jQuery fadeIn() 方法。

jQuery fadeOut()

演示 jQuery fadeOut() 方法。

jQuery fadeToggle()

演示 jQuery fadeToggle() 方法。

jQuery fadeTo()

演示 jQuery fadeTo() 方法。

jQuery Fading 方法

通过 jQuery,您可以实现元素的淡入淡出效果。

 

jQuery 拥有下面四种 fade 方法:

 

fadeIn()

fadeOut()

fadeToggle()

fadeTo()

jQuery fadeIn() 方法

jQuery fadeIn() 用于淡入已隐藏的元素。

 

语法:

$(selector).fadeIn(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

 

可选的 callback 参数是 fading 完成后所执行的函数名称。

 

下面的例子演示了带有不同参数的 fadeIn() 方法:

 

实例

$("button").click(function(){

  $("#p1").fadeIn();

  $("#p2").fadeIn("slow");

  $("#P3").fadeIn(3000);

});

亲自试一试

 

jQuery fadeOut() 方法

jQuery fadeOut() 方法用于淡出可见元素。

 

语法:

$(selector).fadeOut(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

 

可选的 callback 参数是 fading 完成后所执行的函数名称。

 

下面的例子演示了带有不同参数的 fadeOut() 方法:

 

实例

$("button").click(function(){

  $("#p1").fadeOut();

  $("#p2").fadeOut("slow");

  $("#p3").fadeOut(3000);

});

亲自试一试

 

jQuery fadeToggle() 方法

jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

 

如果元素已淡出,则 fadeToggle() 会向元素添加淡入效果。

 

如果元素已淡入,则 fadeToggle() 会向元素添加淡出效果。

 

语法:

$(selector).fadeToggle(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

 

可选的 callback 参数是 fading 完成后所执行的函数名称。

 

下面的例子演示了带有不同参数的 fadeToggle() 方法:

 

实例

$("button").click(function(){

  $("#p1").fadeToggle();

  $("#p2").fadeToggle("slow");

  $("#p3").fadeToggle(3000);

});

亲自试一试

 

jQuery fadeTo() 方法

jQuery fadeTo() 方法允许渐变为给定的不透明度(值介于 0 与 1 之间)。

 

语法:

$(selector).fadeTo(speed,opacITy,callback);

必需的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

 

fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)。

 

可选的 callback 参数是该函数完成后所执行的函数名称。

 

下面的例子演示了带有不同参数的 fadeTo() 方法:

 

实例

$("button").click(function(){

  $("#p1").fadeTo("slow",0.15);

  $("#p2").fadeTo("slow",0.4);

  $("#p3").fadeTo("slow",0.7);

});

亲自试一试

 

 

 

===================================================================================================================================

jQuery 滑动方法可使元素上下滑动。

 

效果演示

点击这里,隐藏/显示面板

 

一寸光阴一寸金,因此,我们为您提供快捷易懂的学习内容。

 

在这里,您可以通过一种易懂的便利的模式获得您需要的任何知识。

 

实例

jQuery slideDown()

演示 jQuery slideDown() 方法。

jQuery slideUp()

演示 jQuery slideUp() 方法。

jQuery slideToggle()

演示 jQuery slideToggle() 方法。

jQuery 滑动方法

通过 jQuery,您可以在元素上创建滑动效果。

 

jQuery 拥有以下滑动方法:

 

slideDown()

slideUp()

slideToggle()

jQuery slideDown() 方法

jQuery slideDown() 方法用于向下滑动元素。

 

语法:

$(selector).slideDown(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

 

可选的 callback 参数是滑动完成后所执行的函数名称。

 

下面的例子演示了 slideDown() 方法:

 

实例

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

  $("#panel").slideDown();

});

亲自试一试

 

jQuery slideUp() 方法

jQuery slideUp() 方法用于向上滑动元素。

 

语法:

$(selector).slideUp(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

 

可选的 callback 参数是滑动完成后所执行的函数名称。

 

下面的例子演示了 slideUp() 方法:

 

实例

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

  $("#panel").slideUp();

});

亲自试一试

 

jQuery slideToggle() 方法

jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。

 

如果元素向下滑动,则 slideToggle() 可向上滑动它们。

 

如果元素向上滑动,则 slideToggle() 可向下滑动它们。

 

$(selector).slideToggle(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

 

可选的 callback 参数是滑动完成后所执行的函数名称。

 

下面的例子演示了 slideToggle() 方法:

 

实例

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

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

});

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-jQuery 自学笔记―9 常见特效 (终章)全部内容,希望文章能够帮你解决javascript代码实例教程-jQuery 自学笔记―9 常见特效 (终章)所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。