在jquery中無需排隊的事件一次全部開火

Question

我是jquery的新手。

這個想法是創建兩個div，當點擊它時，點擊的div會增加大小，而其他減少。這兩個div在點擊時會有鏈接，div會獨立翻轉而不會影響其他div。

我有兩個div（比如說div1和div2），它們在點擊裏面的鏈接時會獨立翻轉。點擊div（在這裏說div1），我通過添加一個我在css中定義的類最大化來最大化它。並儘量減少其他班級。我能夠實現所有......但事件正在一個接一個地發生。看起來真的很奇怪。我張貼下面的代碼。

$('.recharge-panel').click(function (e) { 
    $(".search-panel .flipper").hide(); 
    $('.recharge-panel').removeClass('minimized'); 
    $('.recharge-panel').addClass('maximized'); 
    $('.search-panel').addClass('minimized'); 
    $('.search-panel').removeClass('flip'); 
    $(".recharge-panel .flipper").show(); 
}); 
$('.search-panel').click(function (e) { 
      $(".recharge-panel .flipper").hide(); 
      $('.search-panel').removeClass('minimized'); 
      $('.search-panel').addClass('maximized'); 
      $('.recharge-panel').addClass('minimized'); 
      $('.recharge-panel').removeClass('flip'); 
      $(".search-panel .flipper").show(); 
}); 

和HTML是這樣

<div id="home-content-container4"> 
<div id="div-box-container"> 
<div id="recharge-panel" class="contact homepanel recharge-panel"> 
    <div id="rechargefy" class="front"> 
     <p>This is the front side</p> 
     <a class="flipper flipBack" href="#">Flip</a> 
    </div> 
    <div id="rechargefy" class="back"> 
     <p>This is the back side</p> 
     <a class="flipper flipFront" href="#">Flip</a> 
    </div> 
</div> 

<div class="contact homepanel search-panel second-panel"> 
    <div id="planSearch" class="front"> 
     <p>This is the front side</p> 
     <a class="flipper flipBack" href="#">Flip</a> 
    </div> 
    <div id="planSearch" class="back"> 
     <p>This is the back side</p> 
     <a class="flipper flipFront" href="#">Flip</a> 
    </div> 
</div> 
</div> 

的CSS是如下..

.maximized { 
width: 500px; 
height: 400px; 
-o-transition: 0.5s; 
-ms-transition: 0.5s; 
-moz-transition: 0.5s; 
-webkit-transition: 0.5s; 
transition: 0.5s;} 

.minimized { 
width: 300px; 
height: 200px; 
-o-transition: 0.5s; 
-ms-transition: 0.5s; 
-moz-transition: 0.5s; 
-webkit-transition: 0.5s; 
transition: 0.5s;} 

#div-box-container{ 
position: relative; 
height: 600px; 
width: 1024px; 
-o-transition: 0.5s; 
-ms-transition: 0.5s; 
-moz-transition: 0.5s; 
-webkit-transition: 0.5s; 
transition: 0.5s;} 

.homepanel { 
float: left; 
width: 400px; 
height: 300px; 
font-size: .8em; 
margin-left: 10px; 
-o-transition: 0.5s; 
-ms-transition: 0.5s; 
-moz-transition: 0.5s; 
-webkit-transition: 0.5s; 
transition: 0.5s;   
-webkit-perspective: 600px; 
-moz-perspective: 600px; 
font-family: "Lato","Lucida Grande","Lucida Sans Unicode","Trebuchet MS",Helvetica,Arial,Verdana,sans-serif; 

} 我知道我搞砸了，如果還有人可以幫助我在這，這將是非常棒的！

請讓我知道，如果你有其他方法來實現這種效果。

訪問http://www.hipmunk.com爲最大化最小化效果 和http://css3playground.com/flip-card.php爲翻轉的東西。

Answer 1

的原因的div移動到一個新的位置，並最大限度地提高或增加大小（貌似排隊，但它不是！）是因爲，我已經給

-o-transition: 0.5s; 
-ms-transition: 0.5s; 
-moz-transition: 0.5s; 
-webkit-transition: 0.5s; 
transition: 0.5s; 

完全動畫的DIV相反，你只需要對頂部進行動畫製作，然後單獨放置。

-o-transition: left 0.3s ease-out,top 0.3s ease-out; 
-ms-transition: left 0.3s ease-out,top 0.3s ease-out; 
-moz-transition: left 0.3s ease-out,top 0.3s ease-out; 
-webkit-transition: left 0.3s ease-out,top 0.3s ease-out; 
transition: left 0.3s ease-out,top 0.3s ease-out;