Show/Hide (Avançado)

by gsguma

HTML

<div id="div1" style="display:none">
    <button>Esconder Div1</button>
    <button>Esconder Div1</button>
    <button>Esconder Div1</button>
    <button>Esconder Div1</button>
    <button>Esconder Div1</button>
    <button>Esconder Div1</button>
    <button>Esconder Div1</button>
    <button>Esconder Div1</button>
    <button>Esconder Div1</button>
</div>

<br />

<div id="div2" style="display:none">
    <button>Esconder Div2</button>
    <button>Esconder Div2</button>
    <button>Esconder Div2</button>
    <button>Esconder Div2</button>
    <button>Esconder Div2</button>
    <button>Esconder Div2</button>
    <button>Esconder Div2</button>
    <button>Esconder Div2</button>
    <button>Esconder Div2</button>    
</div>

CSS

#div1 { background: red }
#div2 { background: green }

JavaScript

//Esconde apenas o obj da acao
$('#div1').fadeIn(function() {
    $('#div1 button').click(function() {
        $(this).fadeOut(2000);
    });
});

//Esconde o obj pai
$('#div2').fadeIn(function() {
    $('#div2 button').click($.proxy(function() {
        $(this).fadeOut(2000);
    }, this));
});