javascript - events that fire all at once in Jquery without queue -

i new jquery.

the idea create 2 divs when clicked on it, clicked div increase size whereas other decreases. these 2 divs have link when clicked, div flip independantly , not affecting other div.

i having 2 divs (say div1 , div2) flip independently on clicking link inside it. on clicking div(say div1 here), maximize adding class maximize have defined in css. , minimize other class. able achieve all.. events happening 1 one. looks wierd. posting code below.

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

and html goes this

<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 front side</p>         <a class="flipper flipback" href="#">flip</a>     </div>     <div id="rechargefy" class="back">         <p>this 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 front side</p>         <a class="flipper flipback" href="#">flip</a>     </div>     <div id="plansearch" class="back">         <p>this side</p>         <a class="flipper flipfront" href="#">flip</a>     </div> </div> </div> 

the css follows..

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

} know have screwed up.. if can me out in this, great!!

please let me know if have other methods achieve effect.

visit http://www.hipmunk.com maximizing minimizing effect , http://css3playground.com/flip-card.php flipping thing.

the reason divs move new position , maximize or increase size (looks queuing, not! )is because, have animated div giving

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

instead, have animate top , left alone.

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