反转jQuery Fade滑动面板 [英] reversing the jquery fade slide panel

问题描述

关于有关jquery淡入淡出滑动面板的帖子(http://stackoverflow.com/q/10061847/1688202).

Regarding the post about the jquery fade slide panel (http://stackoverflow.com/q/10061847/1688202).

我想知道是否可以保留该方法?这样内容面板将是标准可见的，并且在单击时消失.

I was wondering if the method could be reserved? So that the content panel will be standard visible and when clicked on disappear.

它试图更改JQuery代码中的某些变量，但我没有成功完成此操作.

It tried to change some variable in the JQuery code, but I did not manage to successfully do this.

下面的代码是由 Shef (http://stackoverflow.com/users/645186/shef)编写的

The code below has been written by Shef (http://stackoverflow.com/users/645186/shef)

由蝙蝠侠解决

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

到CSS，然后将类默认设置添加到要在加载页面时显示的面板，例如

to the CSS, and add the class default to the panel you want to show when you load the page, e.g.

<div class="panel home default">

http://jsfiddle.net/nhEn6/

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

---

推荐答案

只需添加:

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

到CSS，然后将类default添加到要在加载页面时显示的面板中，例如<div class="panel home default">

to the CSS, and add the class default to the panel you want to show when you load the page, e.g. <div class="panel home default">

http://jsfiddle.net/nhEn6/

这篇关于反转jQuery Fade滑动面板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！