jquery淡出幻灯片面板
我已经创建了一个小例子，请看看，http://jsfiddle.net/bWTwL/我想要这样一个面板，以便：1.li（home）.click> slide panel left> content fadeIn 2。 X（单击）> content fadeOut>幻灯片面板右侧
现在，我有7个像家一样的列表项目，关于我等。我希望当用户点击任何列表项目时，该列表项目（家，关于我等）的特定内容应该淡入。 并且如果该面板已经可见，则只有内容应该在点击时淡入/淡出。 我想为他们每个人写每个函数，但这将是一个非常冗长的代码。
我认为像html5数据属性来做这项工作，但失败。请看这里有相同的效果有更好的理解：http://www.unpezvivo.com/proyectos/themeforest/cspp/02/#
提前致谢。
沿着这些线路的东西可以正常工作。
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.标记
<ul id="menu">
<li><a id="home" href="#">Home</a></li>
<li><a id="about-me" href="#">About Me</a></li>
</ul>
<div class="panels">
<div class="panel home">
<div class="content">
<span class="close">X</span>
<p>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</p>
</div>
</div>
<div class="panel about-me">
<div class="content">
<span class="close">X</span>
<p>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</p>
</div>
</div>
</div>
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');
});
});
我使用了pub / sub模式，这使得事情变得更简单。 我们最小化冗余代码。 而且工作流程更容易遵循。
我强烈建议你使用自定义事件的命名空间（例如togglePanel ， hidePanel ， showPanel ，...）。 我没有在这段代码中这样做，因为它对于新手脚本编写者来说已经很复杂，并且留给你作为进一步研究代码的功课。
使他们都是相同的类（例如，myclass），然后使用this ：
$('.myclass').on('click', function() {
$(this).animate({
'width': 'show'
}, 1000, function() {
$(this).fadeIn(500);
});
});
其实，我只是测试上面的代码，它不工作，因为那是衰落中的元素是不是你点击所以第二个同一个， this并不是指到正确的元素。 您需要能够引用要淡入其中的DOM关系（例如，孩子）到被点击的DOM关系。 （看到这个）
所以你可以有：
$('.myclass').on('click', function() {
$(this).animate({
'width': 'show'
}, 1000, function() {
$(this).children(.class2).fadeIn(500);
});
});
为此，您需要设置不同的HTML，而不是将菜单和面板分开。 您可以使用CSS将元素放置在.class2中，以满足您的需求。
或者，你可以给所有东西一个独特的ID，所以菜单项＃M1触发面板项＃P1，＃M2触发＃P2等...
[Shef的回答比我的好得多！]
在事件函数中使用$（this）而不是特定的CSS选择器。 这将引用触发对象：
$(this).fadeOut();
您可以通过逗号分隔与选择器一起使用它：
$(".slide", this).fadeOut();