使用javascript點擊褪色？

所以這個問題可能上面措辭很差，但是，讓我試着在這裏澄清一下。我有一個分成多個部分的html頁面。我有一個右側和左側部分，並在每個部分我有divs進一步分裂的事情。其中一個div稱爲rscontent，它擁有右側的內容，並且我有一個鏈接，一旦點擊就必須關閉rscontent中的所有內容。這是這樣的代碼：使用javascript點擊褪色？

$('section#rightpanel').on('click', 'a#rsclose', function (event) { 
    var $_closer = $(this); 

    var $_sectionNav = $('header.sectionNav'); // needs to adjust size 

    var $_sectionBody = $('section#body'); // needs to adjust size 

    var $_rightpanel = $('section#rightpanel'); // needs to collapse this 


    if ($_rightpanel.is('.collapsed')) { 
     // is closed, so open it 
     $_rightpanel.removeClass('collapsed').find('.rscontent').show(); 
     $_sectionBody.css('width', '56%'); 
     $_rightpanel.css('width', '34%'); 
     $_closer.html('Close'); 
    } else { 
     // is open, so close it 
     $_rightpanel.addClass('collapsed').find('.rscontent').hide(); 
     $_sectionBody.css('width', '90%'); 
     $_rightpanel.css('width', '2.8%'); 
     $_closer.html('Open'); 
    } // collapsed 
    return false; 
});

現在這個工程，但我的問題是我如何添加淡入淡出效果，使關閉不會發生在一瞬間。我從我的CSS代碼，但我不知道如何使用它。

.fade { 
-webkit-transition: all 500ms linear; 
-moz-transition: all 500ms linear; 
-o-transition: all 500ms linear; 
-ms-transition: all 500ms linear; 
}

任何人都知道如何做到這一點。我希望這個問題是有道理的。提前致謝！

來源

2013-06-26 Andy

給出有針對性的不透明度（在這種情況下，零）

.fade { 
    opacity: 0; 
    transition: opacity .25s ease-in-out; 
    -moz-transition: opacity .25s ease-in-out; 
    -webkit-transition: opacity .25s ease-in-out; 
}

淡出類添加要淡出元素。

香草

document.getElementById("MyElement").className += " fade";

jQuery的

$(elem).addClass("fade");

要淡出後觸發的行爲，你可以使用jQuery的.fadeOut在這裏看到：http://api.jquery.com/fadeOut/，並添加一個「完整」的回調或設置一個計時器添加類後CSS淡入的持續時間。

來源

2013-06-26 23:37:51

謝謝。這正是我需要的 – Andy

jQuery可以做褪色。

這裏是jQuery的文檔Fading

的fadeToggle()似乎是一個你最有可能感興趣的，這裏是fadeToggle() documentation plus examples

來源

2013-06-26 23:38:55

謝謝你的幫助！我可能會利用'fadetoggle（）' – Andy

只是一個頭，但我會書籤/最喜歡[jQuery API文檔]（http://api.jquery.com/），因爲你會在那裏結束很多，如果你做任何形式的jQuery開發，我知道我經常訪問它！ :-) –

謝謝！考慮完成！ – Andy

使用javascript點擊褪色？

回答

相關問題