在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;