jQuery调节成分隐蔽和出示,jquery调节作而成分

瞩望本文所述对大家的jQuery程序设计有着扶助。

jQuery调节作而成分隐敝和出示,jquery调节作而成分

1、jQuery掩瞒和出示效果

 

透过 jQuery,您能够利用 hide(卡塔尔(英语:State of Qatar) 和 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 成分: $(“…

上边的JS代码演示了jQuery调节色块成分日渐隐敝的意义,能够垄断(monopoly卡塔尔(英语:State of Qatar)隐敝速度