jQuery写fadeTo示例代码

当需要在页面上实现元素渐变过渡效果时，可以使用jQuery的fadeTo()方法。下面是完整的攻略：

1. 概览

jQuery中的fadeTo()方法可以让元素在指定时间内渐变到指定的不透明度。该方法可以接受两个参数：

• duration: 指定过渡动画的时间，单位为毫秒（默认为400ms）
• opacity: 指定目标不透明度，范围在0到1之间（默认为1）

该方法返回一个jQuery对象，可以继续链式调用其他jQuery方法。

2. 示例说明

示例1：在点击按钮时渐变隐藏一段文本

<button id="hideBtn">隐藏文本</button>
<p id="text">我是一段文本。</p>

$('#hideBtn').click(function() {
    $('#text').fadeTo(1000, 0);
});

上述代码实现了：点击按钮后，网页中id为‘text’的段落元素的过度效果，过渡时间为1000ms，目标不透明度为0即完全隐藏。

示例2：渐变效果与动画的组合应用

<button id="animateBtn">开始动画</button>
<div id="box"></div>

$('#animateBtn').click(function() {
    $('#box').fadeTo(1000, 0, function() {
        $(this).animate({top: '100px', left: '100px'}, 1000, function() {
            $(this).fadeTo(1000, 1);
        });
    });
});

上述代码实现了：点击按钮后，一个空白的div元素在1000ms时间内渐变到不透明度0，然后在该时间段结束后经过1000ms的动画，实现移动到页面上方（top: '100px', left: '100px'），之后又在1000ms时间内渐变到完全不透明。

这是一个较为典型的渐变效果与动画的组合应用。