jquery淡入淡出滑板 [英] jquery fade slide panel

问题描述

我创建了一个小例子，请看看，
http://jsfiddle.net/bWTwL /
我希望有一个这样的面板，以便：
1.li（home）.click>向左滑动面板>内容淡入
2.X（点击）>内容fadeOut>向右滑动面板

I have created a little example,please have a look, http://jsfiddle.net/bWTwL/ I want to have a panel like this so that: 1.li(home).click > slide panel left >content fadeIn 2.X(click) > content fadeOut > slide panel right

现在，我有7个列表项，如home，about me等。我希望当用户点击任何列表项时，特定内容为那个列表项（家，关于我等）应该淡出。
并且如果面板已经可见，那么只有内容应该在点击时淡入/淡出。
我想为每个函数编写每个函数但是这将是一个非常冗长的代码。

Now,I have 7 list items like home,about me etc.I want that when user clicks on any list item,the particular content for that list item (home,about me etc) should fadeIn. and if the panel is already visible then only content should fadeIn/Out on click. I thought to write each function for each of them but that would be a very long messy code.

我认为类似于html5 data-attribute来做工作但失败。请在此处看到相同的效果以便更好地理解： http：/ /www.unpezvivo.com/proyectos/themeforest/cspp/02/#

I thought something like html5 data-attribute to do the job but failed.Please see the same effect here to have a better understanding: http://www.unpezvivo.com/proyectos/themeforest/cspp/02/#

提前致谢。

推荐答案

这些方面的内容可以正常使用。

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。加价

2. Markup

<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

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

---

我有使用发布/订阅模式，这使事情变得更容易。我们最小化冗余代码。并且工作流程更容易理解。

---

I have used the pub/sub pattern, which makes things easier. We minimize the redundant code. And the work flow is easier to follow.

我强烈建议您使用自定义事件的命名空间（例如 togglePanel ， hidePanel ， showPanel ，...）。
我在这段代码中没有这样做，因为对于新手编写脚本来说它已经很复杂了，而且作为一项功课可以让你继续使用这段代码。

I would strongly suggest that you use namespaces for custom events (e.g togglePanel, hidePanel, showPanel, ...). I didn't do that in this code, because it is already complicated for novice scripters, and it is left to you as a homework to take this code further on.

这篇关于jquery淡入淡出滑板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！