動畫點擊DIV

Question

我有3周的div "left"，"active"和"right"看起來像這樣：

...現在，每當我點擊左邊的div，它的動畫，併成爲積極主動人奪的我需要它爲正確的div做同樣的事情。基本上我需要一種方法來讓側邊欄在用戶點擊它們之前變得活躍，以及之前的活動div將其作爲左側或右側div取決於點擊哪個。

因爲我也想改變類名，所以當你點擊左邊的div時，它在中心動畫，我嘗試添加$(this).removeClass('left').addClass('active');，反過來也是爲活動div，但它不起作用，它沒有切換他們之間的類。

這是我迄今爲止JSFIDDLE

Answer 1

你並不需要不同的類，你可以只使用一個box類和使用CSS的:last-of-type和:nth-of-type()選擇樣式。

在jQuery中，您可以根據它們的left值爲div設置動畫。

Updated Fiddle

$('.box').click(function() { 
 
    if ($(this).css('left') != '125px') { 
 
    var l = ($(this).css('left') == '0px') ? 0 : 400; 
 
    $(this).animate({ 
 
     width: 250, 
 
     height: 250, 
 
     left: 125, 
 
     top: 0, 
 
     opacity: 1 
 
    }, 400); 
 
    $('.active').animate({ 
 
     width: 100, 
 
     height: 100, 
 
     left: l, 
 
     top: 75, 
 
     opacity: 0.3 
 
    }, 400); 
 
    $('#header > .box').removeClass('active'); 
 
    $(this).addClass('active'); 
 
    } 
 
});

#header { 
 
    list-style: none; 
 
    width: 500px; 
 
    height: 250px; 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    margin: auto; 
 
    background: #ebebeb; 
 
} 
 
.box { 
 
    width: 100px; 
 
    height: 100px; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 75px; 
 
    background: black; 
 
    opacity: 0.3; 
 
} 
 
.box:nth-of-type(2) { 
 
    width: 250px; 
 
    height: 250px; 
 
    top: 0; 
 
    left: 125px; 
 
    opacity: 1; 
 
} 
 
.box:last-of-type { 
 
    left: 400px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="header"> 
 
    <div class="box"></div> 
 
    <div class="box active"></div> 
 
    <div class="box"></div> 
 
</div>