jQuery技术:扭转jquery淡入淡出滑动面板

关于jquery淡入淡出幻灯片的post（https://stackoverflow.com/q/10061847/1688202）。

我想知道该方法是否可以保留？ 这样内容面板将是标准可见的，当点击时消失。

它试图改变JQuery代码中的一些变量，但我没有成功地做到这一点。

以下代码由Shef编写（https://stackoverflow.com/users/645186/shef）

由蝙蝠侠解决

.panel.default { display:block; } .panel.default .content{ display:block; } 

到CSS，并将类默认添加到您要在加载页面时显示的面板，例如

https://jsfiddle.net/nhEn6/

1. CSS

 div.panel { display:none; position: absolute; top: 0; width:70%; right:0%; height: 100%; z-index: 3; margin: 0; overflow:hidden; background-color:black; } .panel div.content { display:none; font-family:arial; color:white; padding:50px; overflow:hidden; } span.close { position:absolute; right:10px; top:15px; cursor:pointer; }​ 

2.标记

 
 
Home
 
About Me
 
 
 
 
 X 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id ligula elit, vitae tincidunt massa. Vestibulum quis tempus lectus. Vestibulum diam dolor, tristique eget tincidunt eu, posuere nec nulla. Nulla a sollicitudin diam. Nunc venenatis dui in turpis ultricies semper. Nulla justo nibh, volutpat nec rutrum id, viverra ac nulla. Maecenas elit felis, rhoncus sit amet imperdiet eget, ultricies ut lorem. Praesent sed felis diam
 
 
 
 
 X 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id ligula elit, vitae tincidunt massa. Vestibulum quis tempus lectus. Vestibulum diam dolor, tristique eget tincidunt eu, posuere nec nulla. Nulla a sollicitudin diam. Nunc venenatis dui in turpis ultricies semper. Nulla justo nibh, volutpat nec rutrum id, viverra ac nulla. Maecenas elit felis, rhoncus sit amet imperdiet eget, ultricies ut lorem. Praesent sed felis diam
 
 
  

3. jQuery

 $(document).ready(function() { var $panels = $('.panels > .panel'); $('#menu > li').on('click', 'a', function() { $panels.filter('.'+this.id).trigger('togglePanel'); }); $panels .on('togglePanel', function(){ var $this = $(this) , $activePanels = $panels.filter(':visible').not($this); if ($activePanels.length) { $activePanels .one('panelHidden', function(){ $this.is(':visible') ? $this.trigger('hidePanel') : $this.trigger('showPanel'); }) .trigger('hidePanel'); } else { $this.is(':visible') ? $this.trigger('hidePanel') : $this.trigger('showPanel'); } }) .on('hidePanel', function(){ var $this = $(this); $this.find('.content').fadeOut(500, function() { $this.animate({ 'width': 'hide' }, 1000, function(){ $this.trigger('panelHidden'); }); }); }) .on('showPanel', function(){ var $this = $(this); $this.animate({ 'width': 'show' }, 1000, function() { $this.find('.content').fadeIn(500, function(){ $this.trigger('panelShown'); }); }); }); $panels.find('.content .close').on('click', function() { $(this).closest('.panel').trigger('togglePanel'); }); });​ 

 .panel.default { display:block; } .panel.default .content{ display:block; } 

 style="display:block;" 

以上就是jQuery教程分享扭转jquery淡入淡出滑动面板相关内容,想了解更多jQuery开发(异常处理)及jQuery教程关注计算机技术网(www.ctvol.com)!)。