如何使用 jQuery 为 Pseudo 类设置动画或计时答案

【问题标题】：How to animate or timing a Pseudo class using jQuery如何使用 jQuery 为 Pseudo 类设置动画或计时
【发布时间】：2013-04-19 02:55:24
【问题描述】：

假设我有一个元素，我想在悬停状态下更改它。

使用Pseudo 类将如下所示：

#element:before { background-position: 0px -50px; }
#element:hover:before { background-position: -50px -50px; }

我可以为它实现一个 jQuery animation 函数吗？或者我可以确定它的过渡时间吗？

【问题讨论】：

你试过 $("#element:before").animate() 吗？
使用 PURE CSS 解决方案不是更好吗？
当然只能通过 CSS 来解决，但是我正在失去使用 Pseudo 类的能力和优势。

标签： jquery css jquery-animate pseudo-class

【解决方案1】：

这在 jQuery 中是不可能的。

由 :after 或 :before 创建的内容不属于 DOM，因此无法选择或修改。
- (source)

您可以在 CSS 中使用它来实现过渡效果，但这不适用于旧版浏览器：

#element:before {
    -webkit-transition: background-position 1s linear;
    -moz-transition: background-position 1s linear;
    -o-transition: background-position 1s linear;
    -ms-transition: background-position 1s linear;
    transition: background-position 1s linear;
}

【讨论】：

非常感谢。关于 Pseudo 类，这很有用。我将使用 CSS 过渡 :(

【解决方案2】：

你能用.prev()吗？

$(".block").prev().animate();

示例：http://jsfiddle.net/charlescarver/EkW4z/

【讨论】：

在您的示例中，它使用类来重新定位元素，这也是一种解决方案，但是，重要的是要知道，正如@DJDavid98 所写，之前和之后不是 DOM 的一部分，因此可以'不被修改。
@Lior 不完全是。您不需要在元素上使用类，我只使用它们来设置样式。
它使用了 animation() 函数并且工作正常，但是没有操作伪类。 prev() 函数用于跟踪其每个元素的前一个兄弟，但仅此而已。无论如何，非常感谢您花时间参与其中。