jQuery .fadeTo()是如何工作的？

Question

我很好奇 .fadeTo() 如何让一个元素渐变消失？它是使用内联样式的透明度来实现的吗？

如果它没有使用 CSS 的不透明度，那么你如何使用 jQuery 或 JavaScript 控制 CSS 的不透明度？

这个问题涉及以下所有内容：

.fadeTo()
.fadeIn()
.fadeOut()

- stefmikhail

---

尽管浏览器以不同方式实现不透明度，但所有浏览器都支持它。因此，这只是检测和实施正确类型的浏览器/版本的问题，而不是行内/块级属性的问题。 - Jared Farrish

Answer 1

从jQuery源码中 - CSS不透明度。

fadeTo: function( speed, to, easing, callback ) {
    return this.filter(":hidden").css("opacity", 0).show().end()
                .animate({opacity: to}, speed, easing, callback);

- Joe

---

谢谢。我问这个问题的原因是我正在使用一个插件，该插件更改元素的不透明度。我已经在Firebug中查看了源代码，并且我看到不透明度在该元素的内联样式中发生了变化。我想知道是否有一种方法可以控制同一元素的不透明度？ - stefmikhail

没错。$('selector').css('opacity', 50); 将会把一个元素的透明度设置为50%。如果你想要将其动画化到某个值，你可以使用 $('selector').animate({opacity: 50}), 'slow'); 来实现，查看 http://api.jquery.com/animate/ 获取更多选项。 - Joe

Answer 2

它确实使用了CSS opacity！

在这里查看源代码：http://code.jquery.com/jquery-latest.js

并搜索fadeTo。

您将看到（至少今天是这样）：

fadeTo: function( speed, to, easing, callback ) {
    return this.filter(":hidden").css("opacity", 0).show().end()
        .animate({opacity: to}, speed, easing, callback);
},

- Ray Toal

---

谢谢。如果有一个插件控制了元素的不透明度，我如何使用一个函数以同样的方式来操作该元素的不透明度呢？ - stefmikhail

如果你再次在源代码中搜索 "animate:"，你会看到淡入淡出使用的 animate 方法。这个方法的第一个参数是 "prop" - 这是 "property" 的缩写，所以在我们的情况下是 "opacity"。如果你愿意，你可以直接调用它。 - Joe

不透明度是DOM元素的样式属性的一部分，可以通过jQuery、插件或纯粹的原始JavaScript DOM操作来操作。即使在一起使用，它们最终都会影响同一件事情。您是在问如何通过单独的插件或从头开始控制不透明度吗？如果我没有理解问题，请原谅。 - Ray Toal