jquery 淡入淡出

jquery 淡入淡出

一、jQuery fadeIn() 方法

使得一个隐藏的元素淡入视野。首先，元素占据的空间出现在页面上（这可能意味着页面上的其他元素要移走）；然后，元素逐渐地变得可见。如果元素在页面上已经可见，则这个函数没有任何效果。如果没有提供一个速度值，元素使用“常规”设置来淡入（400毫秒）。

1、语法

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

2、参数说明

speed：可选，可以取以下值："slow"、"fast" 或毫秒。 

callback：可选，淡入完成后所执行的函数名称。

3、实例

$("button").click(function()...{
  $("#li1").fadeIn();
  $("#li2").fadeIn("slow");
  $("#li3").fadeIn(3000);
});

		

二、jQuery fadeOut() 方法

通过使得一个可视的元素淡出视线来隐藏它。如果元素在页面上已经隐藏，这个函数没有任何效果，这和fadeIn（）函数一样。如果没有提供一个速度值，元素以400毫秒的速度淡出。

1、语法

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

2、参数说明

speed：可选，可以取以下值："slow"、"fast" 或毫秒。 

callback：可选，淡出完成后所执行的函数名称。

三、jQuery fadeToggle() 方法

组合了淡入和淡出的效果。

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

如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。可以使用这个函数让一个提示框出现在页面上或从页面消失。

1、语法

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

2、参数说明

speed：可选，可以取以下值："slow"、"fast" 或毫秒。 

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

3、例如

假设有一个按钮，其上显示单词“instructions”。当访问者单击该按钮的时候，带有说明的一个li将淡入视线；再次单击该按钮，将会使说明淡出视线。要让该提示框每半秒钟淡入或淡出一次，可以这样编写代码：

$('#button').click(function()...{
$('#instructions').fadeToggle(500);
})

		

四、jQuery fadeTo() 方法

和其他两个效果函数略有不同。它把图像淡化到一定的透明度。例如，可以让图像淡化到半透明。和其他效果不同，必须提供一个速度值。此外，还提供0～1之间的一个值来表示元素的透明度。

1、语法

$(selector).fadeTo(speed,opacity,callback);

speed：必需的，规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

opacity：必需的，将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。

callback：可选的，该函数完成后所执行的函数名称。

2、例如

$("button").click(function()...{
  $("#li1").fadeTo("slow",0.15);
  $("#li2").fadeTo("slow",0.4);
  $("#li3").fadeTo("slow",0.7);
});

		

fadeTo()改变了一个元素的透明度，而不管这个元素是可见的还是不可见的。例如，假设要把当前隐藏的一个元素淡化到50%的透明度。然后，如果使用show（）或fadeIn（）显示该元素，它会以50%的透明度显示。同样，如果隐藏一个半透明的元素，然后再显示它，它的透明度设置还是会恢复。

如果把一个元素淡化到0透明度，该元素就不再可见了，但是，它在页面上占据的空间仍然保留。换句话说，和其他的消失效果不同，淡化到0将会在页面上元素所在的位置留下空白。