Databases
StackOverflow2013
Postsdbo
POevents that fire all at once in Jquery without queue
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POevents that fire all at once in Jquery without queue
    primarykey
    data
    text
    <p>I am new to jquery. </p> <p>The idea is to create two divs that when clicked on it, the clicked div will increase the size whereas the other decreases. These two divs will have an link when clicked, that div will flip independantly and not affecting the other div.</p> <p>I am having two divs (say div1 and div2) which flip independently on clicking a link inside it. On clicking the div(say div1 here), I maximize it by adding a class maximize which I have defined in the css. and minimize the other class. I am able to achieve all.. but the events are happening one by one. which looks really wierd. I am posting the code below.</p> <pre><code>$('.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(); }); </code></pre> <p>and the html goes like this</p> <pre><code>&lt;div id="home-content-container4"&gt; &lt;div id="div-box-container"&gt; &lt;div id="recharge-panel" class="contact homepanel recharge-panel"&gt; &lt;div id="rechargefy" class="front"&gt; &lt;p&gt;This is the front side&lt;/p&gt; &lt;a class="flipper flipBack" href="#"&gt;Flip&lt;/a&gt; &lt;/div&gt; &lt;div id="rechargefy" class="back"&gt; &lt;p&gt;This is the back side&lt;/p&gt; &lt;a class="flipper flipFront" href="#"&gt;Flip&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="contact homepanel search-panel second-panel"&gt; &lt;div id="planSearch" class="front"&gt; &lt;p&gt;This is the front side&lt;/p&gt; &lt;a class="flipper flipBack" href="#"&gt;Flip&lt;/a&gt; &lt;/div&gt; &lt;div id="planSearch" class="back"&gt; &lt;p&gt;This is the back side&lt;/p&gt; &lt;a class="flipper flipFront" href="#"&gt;Flip&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p></p> <p>The css is as follows.. </p> <pre><code>.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; </code></pre> <p>} I know I have screwed up.. if anyone can help me out in this, it will be really great!!</p> <p>Please let me know if you have other methods to achieve this effect.</p> <p>visit <a href="http://www.hipmunk.com" rel="nofollow">http://www.hipmunk.com</a> for the maximizing minimizing effect and <a href="http://css3playground.com/flip-card.php" rel="nofollow">http://css3playground.com/flip-card.php</a> for the flipping thing.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USMohammed Ashiq
    1. USMohammed Ashiq
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POevents that fire all at once in Jquery without queue
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POevents that fire all at once in Jquery without queue
      1. This table or related slice is empty.
      1. VTUpMod
    1. COUhm, are you using CSS transitions to this ?
      singulars
      1. POevents that fire all at once in Jquery without queue
      1. USadeneo
    2. COnothing in your code should be causing any queueing. Most likely it's unrelated to the code you have shown us.
      singulars
      1. POevents that fire all at once in Jquery without queue
      1. USKevin B
    3. COI don't see how this could produce any animated effects. You should use the `.animate()` function with specific styles, or use jQuery UI to animate CSS classes
      singulars
      1. POevents that fire all at once in Jquery without queue
      1. USnullability
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload