javascript - 扩展和收缩元素

Question

我的总体目标是单击 a 并扩展到页面的整个宽度，其他 2 将淡出。然后单击 Active 时，它​​将返回到其初始状态，而其他 2 个将淡入。

我在这里创建了一个 JSFiddle: http://jsfiddle.net/tJugd/3534/

HTML:

<div id="staff" class="slide" style="height:568px;">
<div class="staff1" data-hammer="[object Object]" style="-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);"></div>

<div class="staff2" data-hammer="[object Object]" style="-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);"></div>

<div class="staff3" data-hammer="[object Object]" style="-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);"></div>
</div>

CSS:

.staff1{
    width:33%;
    height:568px;
    background:red;
    float: left;
}
.staff2{
    width:34%;
    height:568px;
    background:blue;
    float: left;
}
.staff3{
    width:33%;
    height:568px;
    background:yellow;
    float: left;
}

JS:

$('div').click(function(){
    $(this).animate({width:'100%'})
})

任何帮助都会很棒!

Answer 1

HTML:

<div id="staff" class="slide" style="height:568px;">
<div class="staff staff1" data-hammer="[object Object]" style="-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);"></div>
<div class="staff staff2" data-hammer="[object Object]" style="-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);"></div>
<div class="staff staff3" data-hammer="[object Object]" style="-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);"></div>
</div>

CSS:

.staff {
    width:33%;
    height:568px;
    float: left;
    transition : width 0.3s;
}
.staff1{
    background:red;
}
.staff2{
    width:34%;
    background:blue;
}
.staff3{
    background:yellow;
}
.full {width: 100%}

JS:

$('div').click(function(){
    $(".selected").removeClass("selected").removeClass("full");
    $(this).addClass("selected");
    $(".staff:not(.selected)").fadeOut(400, function(){
        $(".selected").addClass("full")
    })
})

应该工作

我向所有三个员工 div 添加了一个公共(public)类，并添加了一个宽度为 100% 的“full”类。当我在宽度上向 .staff 添加过渡时，它应该是动画的，最后，我将代码放在 fadeOut 回调中，以防止出现错误。