jquery效果

1、隐藏和显示

• jQuery hide() 和 show()

       （1）、通过 jQuery，可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：

         语法:

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

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

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

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

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

          实例：

$("#hide").click(function(){
  $("p").hide();
});
 
$("#show").click(function(){
  $("p").show();
});

    （2）、带有 speed 参数的 hide() 方法：

       实例：

$("button").click(function(){
  $("p").hide(1000);
});

• jQuery toggle()

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

       显示被隐藏的元素，并隐藏已显示的元素：

       语法:

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

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

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

       实例：

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

2、淡入淡出

• jQuery fadeIn() 方法

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

       语法:

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

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

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

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

        实例：

$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
});

• jQuery fadeOut() 方法

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

  语法:

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

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

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

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

  实例：

  $("button").click(function(){
    $("#div1").fadeOut();
    $("#div2").fadeOut("slow");
    $("#div3").fadeOut(3000);
  });

  jQuery fadeToggle() 方法

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

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

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

  语法:

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

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

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

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

  实例

  $("button").click(function(){
    $("#div1").fadeToggle();
    $("#div2").fadeToggle("slow");
    $("#div3").fadeToggle(3000);
  });