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

Question

我想使用一个复选框淡入和淡出div，但是我不确定如何去做，当你选中它在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');
});

Live demo

Answer 3

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