Javascript 如何使用jQuery切换动画中的样式？

如何在单击时将

opacity:0.5

添加到

li

，并在再次使用动画单击时将不透明度切换回

opacity:1

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

有没有像在类之间切换这样的简单解决方案，或者我需要添加逻辑来检查当前的不透明度并相应地进行更改？我不想更改标记或CSS，但希望通过jQuery进行更改。

您只需要一个标志

$('li').on('click', function () {

    var opacity,
        flag = $(this).data('flag');

    if ( flag ) {
        opacity = 1;
    } else {
        opacity = 0.5;
    }

    $(this).animate({
        opacity: opacity
    }, 500, function () {
        $(this).toggleClass('completed');
        $(this).data('flag', !flag);
    });
});

（故意说得很详细）

$（'li'）。在（'click'，函数（）{
不透明度，
flag=$（this.data（'flag'）；
国际单项体育联合会（旗）{
不透明度=1；
}否则{
不透明度=0.5；
}
$（此）。设置动画({
不透明度：不透明度
}，500，函数（）{
$（this.toggleClass（'completed'）；
$（this）.data（'flag'，！flag）；
});
});
li{颜色：红色；光标：指针；边距：20px 0；}


点击淡出
点击淡出
点击淡出
点击淡出
点击淡出
点击淡出
您只需要一个标志

$('li').on('click', function () {

    var opacity,
        flag = $(this).data('flag');

    if ( flag ) {
        opacity = 1;
    } else {
        opacity = 0.5;
    }

    $(this).animate({
        opacity: opacity
    }, 500, function () {
        $(this).toggleClass('completed');
        $(this).data('flag', !flag);
    });
});

（故意说得很详细）


$（'li'）。在（'click'，函数（）{
不透明度，
flag=$（this.data（'flag'）；
国际单项体育联合会（旗）{
不透明度=1；
}否则{
不透明度=0.5；
}
$（此）。设置动画({
不透明度：不透明度
}，500，函数（）{
$（this.toggleClass（'completed'）；
$（this）.data（'flag'，！flag）；
});
});
li{颜色：红色；光标：指针；边距：20px 0；}


点击淡出
点击淡出
点击淡出
点击淡出
点击淡出
点击淡出
您可以像下面这样做


$（'li'）。在（'click'，函数（）{
如果（$（this）.is（':animated'））返回；//设置动画时忽略单击
var opacity=$（this.css（'opacity'）==1？0.5:1；
$（此）。设置动画({
不透明度：不透明度
}，500，函数（）{
$（this.toggleClass（'completed'）；
});
});


点击这里
点击这里
您可以像下面这样做


$（'li'）。在（'click'，函数（）{
如果（$（this）.is（':animated'））返回；//设置动画时忽略单击
var opacity=$（this.css（'opacity'）==1？0.5:1；
$（此）。设置动画({
不透明度：不透明度
}，500，函数（）{
$（this.toggleClass（'completed'）；
});
});


点击这里
点击这里
我们可以使用数学：）

我们可以用数学：）

您是否考虑过创建另一个设置不透明度的类，并将其与类
completed
一起切换？@aug您的建议肯定会起作用，但出于某些原因，我只想使用jQuery，而不想在CSS中添加任何内容。感谢您考虑过创建另一个设置不透明度的类，并将其与类
completed
一起切换吗？@aug您的建议肯定会起作用，但出于某些原因，我只想使用jQuery，而不想在CSS中添加任何内容。谢谢，我对你的答案投了赞成票。但是你能解释一下数学部分吗？谢谢你，它将是
0.5/$（this.css（“不透明度”）
，因为第一次，它将计算0.5/1，并给你0.5。。下一次它会做0.5/0.5，给你1分，我投票支持你的答案。但是你能解释一下数学部分吗？谢谢你，它将是
0.5/$（this.css（“不透明度”）
，因为第一次，它将计算0.5/1，并给你0.5。。下一次它将执行0.5/0.5，并为您提供1我喜欢此解决方案的简单性-测试布尔值。很难陷入困境。这些都是很好的解决方案。添加“浓缩”版本的道具。@superalStreams-真正的优势是没有样式的查找，这可能不可靠，取决于浏览器返回的内容等。它可以与任何东西一起工作，它是一个切换函数，可以在两个切换状态（如果<代码>条件条件）中粘贴“任何东西”）我喜欢这个解决方案的简单性——测试布尔值。很难陷入困境。这些都是很好的解决方案。添加“浓缩”版本的道具。@superalStreams-真正的优势是没有样式的查找，这可能不可靠，取决于浏览器返回的内容等。它可以与任何东西一起工作，它是一个切换函数，可以在两个切换状态（如果<代码>条件条件）中粘贴“任何东西”）