阅读 225

jQuery 效果- 隐藏和显示

jQuery提供了一个简单的界面来执行各种令人惊奇的效果。

jQuery效果方法使我们能够以最少的配置快速实现常用的效果。

示例1(单击下面的DIV):

单击以显示/隐藏面板

示例2(单击下面的DIV):

www.nhooo.com

基础教程在线

website.


jQuery hide()和show()

您可以使用hide()和show()方法隐藏和显示HTML元素。

下面的示例演示了hide()方法和show()方法的用法:

示例

// 隐藏正常显示的段落$("#hide-btn").click(function(){
  $("p").hide();
});// 显示被隐藏的段落$("#show-btn").click(function(){
  $("p").show();
});

测试看看‹/›

这是hide() 方法的语法:

$(selector).hide(duration, easing, callback);

这是show()方法的语法:

$(selector).show(duration, easing, callback);

hide()和show()方法接受三个可选参数:

  • duration -确定效果将持续多长时间。可能的值:“ slow”,“ fast”或毫秒

  • easing -指示要用于过渡的缓动功能。可能的值:“ swing”,“ linear”

  • callback-指定方法完成后要调用的函数

以下示例通过hide()和show()演示了duration参数:

示例

$("#hide-btn").click(function(){
  $("p").hide(1000);
});

$("#show-btn").click(function(){
  $("p").show(1000);
});

测试看看‹/›

以下示例使用hide()和show()演示了回调参数:

示例

$("#hide-btn").click(function(){
  $("div").hide(1000, function(){
    alert("DIV被隐藏");
  });
});

$("#show-btn").click(function(){
  $("div").show(1000, function(){
    alert("DIV被显示");
  });
});

测试看看‹/›

动画所有跨度(在本示例中为单词)快速隐藏,在200毫秒内完成每个动画:

示例

$("button").click(function(){
  $("span:last-child").hide("fast", function(){
$(this).prev().hide("fast", arguments.callee);
  });
});

测试看看‹/›

jQuery toggle()方法

我们还可以使用toggle()方法在隐藏和显示HTML元素之间切换。

如果所选元素最初显示,它将被隐藏;如果隐藏,它将显示出来。

下面的示例在单击按钮时在hide和show所有<p>元素之间切换:

示例

$("button").click(function(){
  $("p").toggle(1500);
});

测试看看‹/›

toggle()方法的语法如下:

$(selector).toggle(duration, easing, callback);

toggle()方法接受三个可选参数:

  • duration  -确定效果将持续多长时间。可能的值:“ slow”,“ fast”或 毫秒

  • easing -指示要用于过渡的缓动功能。可能的值:“ swing”,“ linear”

  • callback-指定方法完成后要调用的函数

jQuery效果参考

有关完整的效果参考,请访问我们的jQuery Effects 参考手册。


文章分类
代码人生
文章标签
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
相关推荐