I have set up a JSFiddle and I am trying to show and hide some text. When you click on any of the "staff" elements and after the animation I have finishes, the text I have within each of the classes shows. When the user then clicks the "staff" element again, the text hides/fadesout.
My work in progress is here: 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');
});
$('.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/
Simply extend your code with the .fadeIn()
and .fadeOut()
attribute, targeting your div
containing text:
$('.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');
});
and to hide the text on load set div.staff div {display: none}
inside your css.
JS FIDDLE DEMO
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With