Pokaż element po kliknięciu i ukryj ponownie, gdy nie jest aktywny

Question

Ustawiłem JSFiddle i próbuję pokazać i ukryć jakiś tekst. Po kliknięciu dowolnego elementu "staff" i po zakończeniu animacji, wyświetlany jest tekst, który mam w każdej z klas. Kiedy użytkownik ponownie kliknie element "staff", tekst ukrywa/fadeout.

Moja praca w toku jest tutaj: http://jsfiddle.net/tJugd/3571/

HTML:

<div class="slide" style="height:568px;"> 
    <div class="staff staff-matt" data-hammer="[object Object]"> 
     <div id="text1"><h1>Lorem Ipsum<h1><p>lorem ipsum dolar<p></div> 
    </div> 

    <div class="staff staff-shail" data-hammer="[object Object]"> 
     <div id="text2"><h1>Lorem Ipsum<h1><p>lorem ipsum dolar<p></div> 
    </div> 

    <div class="staff staff-leah" data-hammer="[object Object]"> 
     <div id="text3"><h1>Lorem Ipsum<h1><p>lorem ipsum dolar<p></div> 
    </div> 
</div> 

CSS:

.slide{ 
    height:568px; 
    overflow: hidden; 
} 
.staff{ 
    -webkit-user-select: none; 
    -webkit-user-drag: none; 
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
    touch-action: none; 
    -webkit-transform-origin: 0px 0px 0px; 
    opacity: 1; 
    -webkit-transform: scale(1, 1); 
    width:33%; 
    height:568px; 
    background:red; 
    float: left; 
} 
.staff-matt{ 
    background:red; 
    box-shadow: rgba(0, 0, 0, 0.298039) 4px 4px 10px 0px; 
} 
.staff-shail{ 
    background:white; 
    box-shadow: rgba(0, 0, 0, 0.298039) 4px 4px 10px 0px; 
} 
.staff-leah{ 
    background:red; 
    box-shadow: rgba(0, 0, 0, 0.298039) 4px 4px 10px 0px; 
} 

#text1, #text3{ 
    position:relative; 
    background-color:white; 
    width:50%; 
} 

JS:

$('.staff').click(function(){ 
    if($(this).hasClass('clicked')){ 
     $('.staff').animate({width:'33%'}); 
    } else { 
     $('.staff').not(this).animate({width:'0%'}); 
     $(this).animate({width:'100%'}); 
    } 
    $(this).toggleClass('clicked'); 
}); 

Answer 1

$('.staff').click(function(){ 
    if($(this).hasClass('clicked')){ 
     $('.staff').finish().animate({width:'33%'}, 0, function() { 
      $("[id^=text]").fadeOut() 
     }); 
    } else { 
     $('.staff').not(this).finish().animate({width:'0%'}); 
     $(this).finish().animate({width:'100%'}, 0, function() { 
      $("[id^=text]").fadeIn() 
     }); 
    } 
    $(this).toggleClass('clicked'); 
}); 

jsfiddle http://jsfiddle.net/tJugd/3575/

Answer 2

Wystarczy przedłużyć swój kod z przypisują .fadeIn() i .fadeOut(), kierowania swoją div zawierający tekst:

$('.staff').click(function(){ 
    if($(this).hasClass('clicked')){ 
     $('.staff').animate({width:'33%'}).find('div').fadeOut(); //Added this 
    } else { 
     $('.staff').not(this).animate({width:'0%'}); 
     $(this).animate({width:'100%'}).find('div').fadeIn(); //Added this 
    } 
    $(this).toggleClass('clicked'); 
}); 

i ukryć tekst na obciążenia ustawić div.staff div {display: none} wewnątrz css.

JS FIDDLE DEMO