按钮上的JQuery Animate Opacity单击

Question

这似乎可行，但我可能不会以正确的方式做到这一点。不是专门针对不透明度/淡化而是任何动画功能。

$('#button').click(function () {
    $(this).toggleClass('more');
    var txt = $('.more').is(':visible') ? '-' : '+';
    $(this).text(txt);
    if ($('#box').is(':visible')) {
        $('#box').animate({
            opacity: 0
        });
    } else {
        $('#box').animate({
            opacity: 1
        });
    }
});

FIDDLE

Answer 1

的 LIVE DEMO 的

$('#button').click(function () {
    $(this).toggleClass('more');
    var vis = $(this).hasClass('more'); // boolean
    $(this).text( vis ? '-' : '+' );
    $('#box').stop().animate({opacity: vis ? 0 : 1 });
});

切换课程后，测试状态，是否有课程，使其为boolean（frue / false）
你可以轻松地在一个内部使用该布尔值 条件运算符（？:)（AKA ternary operator）执行truthy / falsy更改
任何所需方法

示例：

var iAmHappy = true;     // boolean
$('#mood').text( iAmHappy ? "Happy" : "Sad" )
          .css({ color:  iAmHappy ? "green" : "red" });