扭转jquery淡入淡出滑动面板

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

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

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

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

由蝙蝠侠解决

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

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

http://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'); }); });​ 

---

Answer 1

只需添加：

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

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

http://jsfiddle.net/nhEn6/

Answer 2

你可以加

 style="display:block;" 

内联到您希望默认显示的html元素。

您需要将此添加到panel和content类。