使用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点击褪色？

回答

相关问题