使用 hide和 show方法来隐藏和显示 HTML 元素

146 阅读1分钟

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

  实例

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

  $("p").hide();

  });

  www.jshk.com.cn/mb/reg.asp?…

  $("#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);

  });

  尝试一下»

  下面的例子演示了带有speed参数的hide()方法,并使用回调函数:

  实例

  $(document).ready(function(){

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

  $("div").hide(1000,"linear",function(){

  alert("Hide()方法已完成!");

  });

  });

  });

  尝试一下»

  第二个参数是一个字符串,表示过渡使用哪种缓动函数。(译者注:jQuery自身提供"linear"和"swing",其他可以使用相关的插件)。

  jQuery toggle()

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

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

  实例

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

  $("p").toggle();

  });

  尝试一下»

  语法:

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

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

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

用于添加新内容的四个 jQuery 方法.png