jQuery - 使用复选框淡入和淡出 div

Question

我想使用一个复选框来淡入和淡出一个 div，但我不知道如何 go 关于它，当你选中它在 div 中淡入淡出的框时，当你取消选择它时它淡出它的复选框。

我的代码如下：

<input type="checkbox" name="trending" id="trending" />

<div id="trendingdisplay">
    <!-- my div content goes in here -->
</div>

Answer 1

演示： http://jsfiddle.net/jomanlk/WfMCp/1/

那只是一行，你可以使用fadeToggle()方法

$('#trendingdisplay').hide();//hide on load

$('#trending').click(function(){
    $('#trendingdisplay').fadeToggle();
})

Answer 2

您可以使用.toggle()方法：

$('#trending').click(function() {
    $('#trendingdisplay').toggle('slow');
});

现场演示。

Answer 3

$('#trending').click(function(){
    if($('#trending').is(':checked')) {
        $('#trendingdisplay').fadeIn('slow');
    } else {
        $('#trendingdisplay').fadeOut('slow');   
    }
});