Databases
StackOverflow2013
Postsdbo
POjquery animation
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjquery animation
    primarykey
    data
    text
    <p>I have an animation that fires on click.</p> <p>I have four images and I want to make larger on click and display some text.</p> <p>problem I'm having is that you can click the images at will and they all start resizing which then causes it to not behave.</p> <p>here is the html</p> <pre><code>&lt;div id="nav" style="width: 980px; position: absolute; left: 100px; overflow: hidden" &gt; &lt;div class="item active"&gt; &lt;img src="images/image1.png" width="148" height="190" /&gt; &lt;div style="width:350px; position: absolute; left: 250px; bottom: 0px; z-index: 100"&gt; &lt;h2 style="color:#009DD8"&gt;Title1&lt;/h2&gt; &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas turpis turpis, rutrum nec euismod ac, mattis eget felis&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="item"&gt; &lt;img src="images/image2.jpg" width="148" height="190" /&gt; &lt;div style="width:350px; position: absolute; left: 250px; bottom: 0px; z-index: 100"&gt; &lt;h2 style="color:#902272"&gt;Title2&lt;/h2&gt; &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas turpis turpis, rutrum nec euismod ac, mattis eget felis&lt;/p&gt;&lt;/div&gt; &lt;/div&gt; &lt;div class="item"&gt; &lt;img src="images/image3.png" width="148" height="190" /&gt; &lt;div style="width:350px; position: absolute; left: -375px; bottom: 0px; z-index: 100"&gt; &lt;h2 style="color:#68AA41"&gt;Title3&lt;/h2&gt; &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas turpis turpis, rutrum nec euismod ac, mattis eget felis&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="item"&gt; &lt;img src="images/image4.png" width="148" height="190" /&gt; &lt;div style="width:350px; position: absolute; left: -395px; bottom: 0px; z-index: 100"&gt; &lt;h2 style="color:#F5B21D"&gt;Title4&lt;/h2&gt; &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas turpis turpis, rutrum nec euismod ac, mattis eget felis&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p></p> <p>here is the jquery</p> <pre><code>$(document).ready(function() { $("#nav div.active").animate({"width": 244,"height": 316}, 1500 ).addClass('active'); $("#nav div.active").find('img').animate({"width": 244, "height": 316}, 1500); $("#nav div.active").find('div').fadeIn(100); $('#nav div').click(function(){ if($(this).hasClass('active')) { $(this).animate({"width": 148, "height": 190}, 1500 ).removeClass('active'); $(this).find('img').animate({"width": 148, "height": 190}, 1500 ); $(this).find('div').fadeOut(500); } else { $(this).animate({"width": 244,"height": 316}, 1500 ).addClass('active'); $(this).find('img').animate({"width": 244, "height": 316}, 1500 ); $(this).find('div').fadeIn(100); $('.active').not(this).find('img').animate({"width": 148,"height": 190}, 1500 ); $('.active').not(this).find('div').css({"display": "none"}); $('.active').not(this).animate({"width": 148,"height": 190}, 1500 ).removeClass('active'); } }); </code></pre> <p>});</p> <p>I have tried adding .stop() in places but this makes thing worse. Any ideas?</p> <p>i need these lines to fire at the sametime, one resizes the image the other its container div. if i fireone after the other then it screws up</p> <pre><code>$(this).animate({"width": 244,"height": 316}, 1500 ).addClass('active'); $(this).find('img').animate({"width": 244, "height": 316}, 1500 ); $(this).animate({"width": 148, "height": 190}, 1500 ).removeClass('active'); $(this).find('img').animate({"width": 148, "height": 190}, 1500 ); </code></pre> <p>i guess what i want to do is delay the click function until the current animation is complete or better still if another is clicked during an animation to cancel it and return to normal state before firing the onclick function</p> <p>credit to Nicolas C.</p> <p>i also tried </p> <pre><code>$('#nav div').click(function(){ if(!$('#nav div').is(':animated')) { if($(this).hasClass('active')) { $(this).animate({"width": 148, "height": 190}, 1500 ).removeClass('active'); $(this).find('img').animate({"width": 148, "height": 190}, 1500 ); $(this).find('div').fadeOut(500).stop(true, true); } else { $(this).animate({"width": 244,"height": 316}, 1500 ).addClass('active'); $(this).find('img').animate({"width": 244, "height": 316}, 1500 ); $(this).find('div').fadeIn(100).stop(true, true); $('.active').not($(this)).find('img').animate({"width": 148,"height": 190}, 1500 ); $('.active').not($(this)).find('div').fadeOut(500).stop(true, true); $('.active').not($(this)).animate({"width": 148,"height": 190}, 1500 ).removeClass('active'); } } }); </code></pre> <p>works but not very user friendly if they are clicking and it doesnt respond</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USAdam
    1. USAdam
    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
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POjquery animation
      1. This table or related slice is empty.
      1. VTApproveEditSuggestion
    2. VO
      singulars
      1. POjquery animation
      1. This table or related slice is empty.
      1. VTUpMod
    1. COquestions about jquery not css!
      singulars
      1. POjquery animation
      1. USAdam
    2. COWell than Adam... your question (even without a fiddle), to me, looks pretty like this. That's why I asked about some CSS. http://jsfiddle.net/roXon/wzkwN/
      singulars
      1. POjquery animation
      1. USRoko C. Buljan
    3. COi think i should start using fiddle. you can see the issue if you click on boxes before the animation has finished.
      singulars
      1. POjquery animation
      1. USAdam
 

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