javascript – 单击时显示元素,不活动时再次隐藏

发布时间：2020-12-14 23:10:58 所属栏目：资源来源：网络整理

导读：我已经设置了一个JSFiddle,我试图显示和隐藏一些文本. 当您单击任何“staff”元素并在动画结束后,我在每个类中显示的文本显示.当用户再次单击“staff”元素时,文本会隐藏/淡出. 我正在进行的工作在这里：http://jsfiddle.net/tJugd/3571/ HTML： CSS： .slid

我已经设置了一个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/
                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!