javascript - 如何使用 jQuery 在动画中切换样式？

Question

如何在单击时将 opacity: 0.5 添加到 li 并在再次单击动画时将不透明度切换回 opacity:1 ？

$('li').on('click', function () {
    $(this).animate({
        opacity: 0.5
    }, 500, function () {
        $(this).toggleClass('completed');
    });
});

是否有任何简单的解决方案，例如在类之间切换，或者我是否需要添加逻辑来检查当前的不透明度并相应地进行更改？我不想更改标记或 CSS，但想通过 jQuery 来完成。

Answer 1

我们可以为此使用数学:)

$('li').on('click', function () {
    $(this).animate({
        opacity: (0.5 / $(this).css("opacity"))
    }, 500, function () {
        $(this).toggleClass('completed');
    });
});