Question

这是我的代码：

$('#retouche_a_faire').click(function() {
$("#retouche_a_faire_alert").toggle(this.checked);
});

它运作良好。基本上，它是一个函数，当选中“retouche_a_faire”复选框时会显示div，而当它不复选时会消失。但我想使用fadeToggle选项而不是toggle。我怎样才能做到这一点？

我试过了：

$('#retouche_a_faire').click(function() {
$("#retouche_a_faire_alert").fadeToggle(this.checked);
});

但它不起作用，因为我需要设置持续时间并缓和我认为......但我也需要在parantheses中使用“this.checked”......我有点困惑。

谢谢！

Answer 1

http://jsfiddle.net/a6Dkw/4/

在这种情况下，您不想使用fadeToggle（），除非您知道它将以display:none开头，测试它是否更加安全。此外，如果您使用的是jQuery 1.7.2，则可以使用.on('click')和.prop()

$('#retouche_a_faire').on('click', function() {
    if ($(this).prop('checked')) {
        $("#retouche_a_faire_alert").fadeIn();
    }
    else {
        $("#retouche_a_faire_alert").fadeOut();
    }
});

Answer 2

fadeToggle没有布尔选项，但您可以根据以下复选框使用fadeOut / fadeIn：

$('#retouche_a_faire').click(function() {
    if ($(this).prop('checked')) {
        $("#retouche_a_faire_alert").fadeIn( [duration] [, easing] [, callback] );
    } else {
        $("#retouche_a_faire_alert").fadeOut( [duration] [, easing] [, callback] );
    }
});

Answer 3

基本形式：

$('#retouche_a_faire').click(function() {
  $("#retouche_a_faire_alert").fadeToggle();
});

如果您想使用.fadeToggle()，可以运行检查onload以显示隐藏警报，具体取决于是否选中了其复选框：

if (!$("#retouche_a_faire").attr('checked'))
    $("#retouche_a_faire_alert").hide();

请参阅我的示例小提琴 - http://jsfiddle.net/Y2cnR/

<强>更新我已经更新了我的小提示，以显示将我的答案应用于多个输入 - http://jsfiddle.net/Y2cnR/1/

Answer 4

您可以将boolean值与fadeTo一起使用，例如

$('#retouche_a_faire').click(function() { 
    $('#retouche_a_faire_alert').stop().fadeTo(200,this.checked ? 1 : 0);
});

http://jsfiddle.net/VqD5C/1/

fadeToggle使用切换功能

4 个答案: