点击时显示元素，未激活时再次隐藏

Question

我已经建立了一个JSFiddle，试图展示和隐藏一些文本。当您单击任何“staff”元素并且我完成的动画后，我在每个类中的文本将显示。当用户再次单击“staff”元素时，文本将隐藏/淡出。

我的正在进行的工作在这里：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');
});

- Clarke Cribb

---

那么，有什么问题吗？这对我来说似乎是有效的？ - Parsa

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/

注：这里的双大括号表示链接，并非代码。

- guest271314

Answer 2

只需使用.fadeIn()和.fadeOut()属性扩展您的代码，将其指向包含文本的div：

$('.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');
});

如果要在加载时隐藏文本，请在CSS中设置div.staff div {display: none}。

JS FIDDLE DEMO

- Marian Rick