我已经设置了一个JSfiddle,我试图显示和隐藏一些文本.
当您单击任何“staff”元素并在动画结束后,我在每个类中显示的文本显示.当用户再次单击“staff”元素时,文本会隐藏/淡出.
我正在进行的工作在这里:http://jsfiddle.net/tJugd/3571/
HTML:
CSS:
.slide{
height:568px;
overflow: hidden;
}
.staff{
-webkit-user-select: none;
-webkit-user-drag: none;
-webkit-tap-highlight-color: rgba(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.298039) 4px 4px 10px 0px;
}
.staff-shail{
background:white;
Box-shadow: rgba(0,0.298039) 4px 4px 10px 0px;
}
.staff-leah{
background:red;
Box-shadow: rgba(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%'},function() {
$("[id^=text]").fadeOut()
});
} else {
$('.staff').not(this).finish().animate({width:'0%'});
$(this).finish().animate({width:'100%'},function() {
$("[id^=text]").fadeIn()
});
}
$(this).toggleClass('clicked');
});
jsfiddle http://jsfiddle.net/tJugd/3575/