Databases
StackOverflow2013
Postsdbo
POjQuery animation mess when trying to animate multiple elements at the same time
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery animation mess when trying to animate multiple elements at the same time
    text
    copied!<p>I'm trying to fade out an div (with an image inside) and fade in a div (with text inside) at the same time. So there is some kind of transition effect. But when i'm moving the cursor too fast over multiple divs, some fade in, some fade out and in the end some are still invisible.</p> <p><strong>Styling</strong></p> <pre><code>.portfolio-thumbnail-detail { position: absolute; top: 0; left: 0; width: 320px; height: 320px; display: none; } </code></pre> <p><strong>Markup</strong></p> <pre><code>&lt;div class="span5 portfolio-item" title="&lt;?php echo $portfolio-&gt;ID; ?&gt;"&gt; &lt;a href="&lt;?php echo $portfolio-&gt;guid ?&gt;"&gt; &lt;div class="portfolio-thumbnail" id="portfolio-thumbnail-&lt;?php echo $portfolio-&gt;ID; ?&gt;"&gt; &lt;img src="image.png"&gt; &lt;/div&gt; &lt;div class="portfolio-thumbnail-detail" id="portfolio-thumbnail-detail-&lt;?php echo $portfolio-&gt;ID; ?&gt;"&gt; Text &lt;/div&gt; &lt;/a&gt; &lt;/div&gt; </code></pre> <p><strong>Script</strong></p> <pre><code>$(document).ready(function() { $('.portfolio-item').hover(function() { var id = -1; var image, detail; id = $(this).attr('title'); image = $('#portfolio-thumbnail-'+id); detail = $('#portfolio-thumbnail-detail-'+id); detail.css('opacity', 0); detail.show(); $(image).animate({ opacity: 0, }, { duration: 400, step: function(now, fx) { detail.css('opacity', 1-now); }, complete: function() { image.hide(); }, }); }, function() { var id = -1; var image, detail; id = $(this).attr('title'); image = $('#portfolio-thumbnail-'+id); detail = $('#portfolio-thumbnail-detail-'+id); image.css('opacity', 0); image.show(); $(detail).animate({ opacity: 0, }, { duration: 400, step: function(now, fx) { image.css('opacity', 1-now); }, complete: function() { detail.hide(); }, }); }); }); </code></pre> <p><strong>Possible Solution</strong></p> <p>I found another solution. I call a <em>reset()</em> function at the beginning of the hover function and in the complete event of the "hover-out" function.</p> <blockquote> <p>function reset() {<br> $('.portfolio-thumbnail').css('opacity', 1);<br> $('.portfolio-thumbnail-detail').css('opacity', 0);<br> }</p> </blockquote> <p>That looks ok to me.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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