jQuery使用hide方法隐藏页面上指定元素的方法_jquery_脚本之家

$.ready{ $.click.hide;This is a headingThis is a paragraph.This is another paragraph.Click me

jQuery控制元素隐藏和显示,jquery控制元素

1、jQuery隐藏和显示效果

 

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

$("#hide").click(function(){
  $("p").hide();
});     //点击id="hide"元素时,隐藏所有<p>标签内容;

$("#show").click(function(){
  $("p").show();
});     //点击id="show"元素时,显示所有<p>标签内容;

 2、jQuery淡入淡出效果

 

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

jQuery 拥有下面四种 fade 方法:

  • fadeIn()
  • fadeOut()
  • fadeToggle()
  • fadeTo()

    //jQuery fadeIn() 用于淡入已隐藏的元素;
    
    $(selector).fadeIn(speed,callback);
    //speed(可选)参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒;
    //callback(可选) 参数是 fading 完成后所执行的函数名称;
    
    $("button").click(function(){
      $("#div1").fadeIn();
      $("#div2").fadeIn("slow");
      $("#div3").fadeIn(3000);
    });     //点击<button>按钮时,不同效果的淡入id分别为"div1,div2,div3"的元素;
    
    //jQuery fadeOut() 方法用于淡出可见元素;
    
    $(selector).fadeOut(speed,callback);
    //speed(可选)参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒;
    //callback(可选) 参数是 fading 完成后所执行的函数名称;
    
    $("button").click(function(){
      $("#div1").fadeOut();
      $("#div2").fadeOut("slow");
      $("#div3").fadeOut(3000);
    });    //点击<button>按钮时,不同效果的淡出id分别为"div1,div2,div3"的元素;
    
    //jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换;
    //如果元素已淡出,则 fadeToggle() 会向元素添加淡入效果;
    //如果元素已淡入,则 fadeToggle() 会向元素添加淡出效果;
    
    $(selector).fadeToggle(speed,callback);
    //speed(可选)参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒;
    //callback(可选) 参数是 fading 完成后所执行的函数名称;
    
    $("button").click(function(){
      $("#div1").fadeToggle();
      $("#div2").fadeToggle("slow");
      $("#div3").fadeToggle(3000);
    });      //点击<button>按钮时,不同效果的淡出淡入id分别为"div1,div2,div3"的元素;
    
    //jQuery fadeTo() 方法允许渐变为给定的不透明度(值介于 0 与 1 之间);
    
    $(selector).fadeTo(speed,opacity,callback);
    //speed(必选)参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒;
    //opacity(必选)参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间);
    //callback(可选) 参数是 fading 完成后所执行的函数名称;
    
    $("button").click(function(){
      $("#div1").fadeTo("slow",0.15);
      $("#div2").fadeTo("slow",0.4);
      $("#div3").fadeTo("slow",0.7);
    });     //点击<button>按钮时,以给出的不透明度淡入淡出id分别为"div1,div2,div3"的元素;
    

 3、jQuery滑动效果

 

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

jQuery 拥有以下滑动方法:

  • slideDown()
  • slideUp()
  • slideToggle()

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

$(selector).slideDown(speed,callback);
//speed(可选)参数规定效果的时长,它可以取以下值:"slow"、"fast" 或毫秒;
//callback(可选)参数是滑动完成后所执行的函数名称;

$("#flip").click(function(){
  $("#panel").slideDown();
});     //点击id为flip的元素时,将id为panel的元素向下滑动;

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

$(selector).slideUp(speed,callback);
//speed(可选)参数规定效果的时长,它可以取以下值:"slow"、"fast" 或毫秒;
//callback(可选)参数是滑动完成后所执行的函数名称;

$("#flip").click(function(){
  $("#panel").slideUp();
});     //点击id为flip的元素时,将id为panel的元素向上滑动;

//jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换;
//如果元素向下滑动,则 slideToggle() 可向上滑动它们;
//如果元素向上滑动,则 slideToggle() 可向下滑动它们;

$(selector).slideToggle(speed,callback);
//speed(可选)参数规定效果的时长,它可以取以下值:"slow"、"fast" 或毫秒;
//callback(可选)参数是滑动完成后所执行的函数名称;

$("#flip").click(function(){
  $("#panel").slideToggle();
});     //点击id为flip的元素时,将id为panel的元素向上或向下滑动;

 

转载自本人ITeye链接:http://xiaozhuang0706.iteye.com/blog/2255816

 

1、jQuery隐藏和显示效果 通过 jQuery,您可以使用 hide() 和 show()
方法来隐藏和显示 HTML 元素: $(“…

语法:

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

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

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

希望本文所述对大家的jQuery程序设计有所帮助。

jQuery 效果参考手册

如需全面查阅 jQuery 效果,请访问 jQuery
效果参考手册。

 

 

下面的JS代码隐藏了网页中所有

jQuery toggle()

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

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