jQuery - 使用複選框淡入淡出div

我想使用複選框來淡入淡出div，但我不知道如何去做，當你檢查它在淡入淡出的盒子時，當您取消選擇複選框時，它會淡出。jQuery - 使用複選框淡入淡出div

代碼中，我有如下：

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

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

來源

2011-04-30 BigJobbies

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

這只是一條線，你可以使用fadeToggle()方法

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

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

來源

2011-04-30 06:57:19 JohnP

這是有效的，除非當表單加載複選框將被取消選中，這意味着該div不應該在那裏......它只會在勾選複選框時出現。 – BigJobbies 2011-04-30 07:02:15

@BigJobbies通過JS隱藏。使它更可用 – JohnP 2011-04-30 07:04:14

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

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

Live demo。

來源

2011-04-30 06:56:49

這樣的作品，除非，當表單加載複選框將被選中，這意味着div不應該在那裏......它只會在勾選複選框時出現。 – BigJobbies 2011-04-30 07:01:14

@BigJobbies，在這種情況下，你可以用'display：none;'將它應用到一個CSS類中，以便最初隱藏它。 – 2011-04-30 07:02:00

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

來源

2011-04-30 07:00:31 Tomas

更好的選擇將是'if（this.checked）'' – 2011-04-30 07:18:59

jQuery - 使用複選框淡入淡出div

回答

相關問題