jquery fade slide panel

Question

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

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.

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/#

Thanks in advance.

Answer 1

Something along these lines will work fine.

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. 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

$(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.

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.

Answer 2

Make them all the same class (e.g., myclass) and then use this:

$('.myclass').on('click', function() {
    $(this).animate({
        'width': 'show'
    }, 1000, function() {
        $(this).fadeIn(500);
    });
});

Actually, I just tested the above code and it doesn't work because the element that is fading in is not the same one you are clicking so the second this does not refer to the right element. You'd need to be able to refer to the one you want to fade in using its DOM relationship (e.g., child) to the one that is being clicked. (See this.)

So you could have:

$('.myclass').on('click', function() {
    $(this).animate({
        'width': 'show'
    }, 1000, function() {
        $(this).children(.class2).fadeIn(500);
    });
});

For this to work, you'd need a different HTML set up rather than having the menu and panel separate. You could use CSS to place the elements in .class2 how you want them.

Alternatively, you could just give everything a unique id so menu item #M1 triggers panel item #P1, #M2 triggers #P2 etc...

[Shef's answer is much better than mine!]

Answer 3

Use $(this) inside an event function instead of specific CSS selectors. This will refer to the triggered object:

$(this).fadeOut();

You can use it in conjunction with selectors by a comma separation:

$(".slide", this).fadeOut();