1

这是我的代码：

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

它工作得很好。基本上，它是一个div在“retouche_a_faire”复选框被选中时出现的功能，当它不是时消失。但我想使用该fadeToggle选项而不是toggle. 我怎样才能使这项工作？

我试过 ：

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

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

谢谢！

4

4 回答 4

2

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();
    }
});​
于 2012-08-13T15:35:54.557 回答
1

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] );
    }
});
于 2012-08-13T15:30:43.170 回答
1

其基本形式：

$('#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/

于 2012-08-13T15:32:02.357 回答
0

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

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

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

于 2012-08-13T15:42:21.710 回答