如何使用jQuery切換動畫樣式？

Question

如何在單擊時將opacity: 0.5添加到li並在再次單擊動畫時將opacity:1切換回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');
    });
});

Answer 2

您可以按照以下步驟進行操作。

 $('li').on('click', function () { if ($(this).is(':animated')) return; //ignore click while animating var opacity = $(this).css('opacity') == 1 ? 0.5 : 1; $(this).animate({ opacity: opacity }, 500, function () { $(this).toggleClass('completed'); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li>Click Here</li> <li>Click Here</li> </ul> 

Answer 3

您只需要一個標志

$('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').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 {color : red; cursor: pointer; margin: 20px 0 0 0;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li>Click to fade</li> <li>Click to fade</li> <li>Click to fade</li> <li>Click to fade</li> <li>Click to fade</li> <li>Click to fade</li> </ul> 

不太詳細的版本

$('li').on('click', function () {
    var flag = $(this).data('flag');

    $(this).fadeTo(500, flag ? 1 : 0.5, function() {
        $(this).toggleClass('completed').data('flag', !flag);
    });
});