使用jQuery淡入淡出HTML文本效果

Web 2.0应用已经成为普遍的今天。已纳入许多新的功能，使用AJAX，JavaScript中，DHTML等Web应用程序中，使他们在丰富用户的吸引力。jQuery的是，已经改变了我们编写客户端代码的框架之一。

 

让我们看到了一个简单的伎俩，淡入和淡出的文本使用jQuery。此代码可以很容易地推广任何HTML组件。通过改变任何文字/格/ html组件的能见度逐渐从透明固体和正相反淡出淡入工程。对于不同的浏览器有不同的方式来实现这一点。使用jQuery，我们能够避免跨浏览器的问题，可以直接实现淡入/淡出效果。

 

在jQuery淡入为例

考虑在div下面的文本。

<div id="sometext">

    This text will Fade In and Out.

</div>

现在，我们可以使用jQuery淡入出这个文本。只要复制以下文本。

$("#something").fadeOut("slow");

...

$("#something").fadeOut(2000);

...

$("#something").fadeOut("slow", function() {

    alert("Animation done");

});

我已经证明了3过关淡出一个div /文。在第一个代码，一个ID的div的东西正在慢慢淡出淡出（）函数。请注意，我们已经通过“慢”的参数。你也可以传递一个数字，表示此功能毫秒。

 

淡出（）函数还需要第二个参数，这是一个动画时，被调用的回调函数。例如，我在这里通过一个简单的处理功能，提醒后，动画文本。

 

同样，你可以使用淡入（）函数来实现淡入淡出功能。

$("#something").fadeIn("slow");

...

$("#something").fadeIn(2000);

...

$("#something").fadeIn("slow", function() {

    alert("Animation done");

});

下面的代码将所有淡入段<P>标签的文本。

$("p").fadeIn("slow",function(){

    alert("Animation Done.");

});

使用fadeTo要达到一定的透明度。

我们可以使用jQuery的fadeTo（）函数指定的透明度和射击完成后可选的回调函数来设置所有匹配元素的不透明度。仅此动画不透明度调整为，这意味着，所有匹配的元素，应该已经有了某种形式与他们有联系的高度和宽度。

$("p").fadeTo("slow", 0.5);

...

$("p").fadeTo("slow", 0.5, function(){

    alert("Animation Done.");

});
希望你会喜欢这一招。jQuery是真是太神奇了。
严重声明：转载请注明出处