详解jQuery使用fadeTo()方法改变指定元素的透明度

这一次，让我们通过一个示例来解释如何使用 jQuery 的“.fadeTo()”。

fadeTo()方法 的功能是什么？

fadeTo() 方法是逐渐改变被选元素的不透明度为指定的值（褪色效果）。

但是，这只改变了透明度，即使将透明度设置为 0，元素的本身也存在，因此元素的位置保持原样。

如果你不仅要隐藏元素的透明度，还要隐藏它的存在本身，那你你需要使用.fadeOut()方法 ，所以请参考这篇文章。

详解jQuery使用.hide()/.fadeOut() 淡出和隐藏指定元素

fadeTo() 语法

.fadeTo()具有以下语法

$(选择器).fadeTo(周期,透明度,缓动速度,回调函数)

第一个参数“周期（毫秒）”，第二个参数“透明度（0到1）”，缓动和回调函数不是必须的，是可选的。

可以将回调函数指定为参数

.fadeTo()可以通过在参数中放置一个回调函数，在透明度变化后添加一些处理。

$("选择器").fadeTo(3000,0.5 function(){
  //透明度变化后要添加的处理
});

使用fadeTo()的示例

通过单击按钮更改目标透明度的示例

让我们看一个在单击按钮时更改示例文本透明度的示例。

HTML

<button>更改透明度</button>
<p class="target">示例文本</p>

jQuery

$(function(){
 $('button').on('click', function() {
  $('.target').fadeTo(1000,0.2);
 });
});

在此示例中，单击button将class="target"在 1000 毫秒（1 秒）内将相应的“示例文本”从不透明度 1 更改为 0.2。

使用回调函数更改透明度后改变文本颜色的示例

让我们看一个示例，在单击按钮时更改示例文本的透明度，然后使用回调函数将示例文本的颜色更改为红色。

HTML

<button>更改透明度</button>
<p class="target">示例文本</p>

jQuery

$(function(){
  $('button').on('click', function() {
    $('.target').fadeTo(1000,0.4,function(){
      $(this).css("color","red");
    });
  });
});

在此示例中，单击button将class="target"在 1000 毫秒（1 秒）内将相应的“示例文本”从透明度 1 逐渐更改为透明度 0.4。

然后回调函数更改class="target"的color为red。