Databases
StackOverflow2013
Postsdbo
POjQuery Photo Gallery Bug if mouse moves fast
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery Photo Gallery Bug if mouse moves fast
    text
    copied!<p>This is a very weird bug, my code is most probably correct, since it works in most cases except when mouse is moving around on elements very fast.</p> <p>Here is my CSS:</p> <pre><code>&lt;style type="text/css"&gt; .fadeto { opacity:0.4; position:box; } .selected { opacity:1.0; border-style:solid; border-color:gold; } &lt;/style&gt; </code></pre> <p>Here is my html body:</p> <p>Click over the images to toggle their permanent visibility. Or click here to toggle them all: Toggle</p> <pre><code>&lt;div style="margin:50px;"&gt; &lt;img class="fadeto" src="nature.jpg" /&gt;&lt;!--you can change the source--&gt; &lt;img class="fadeto selected" src="nature.jpg" /&gt;&lt;!--by default selected, just not to waste time selecting elements--&gt; &lt;img class="fadeto" src="nature.jpg" /&gt; &lt;img class="fadeto" src="nature.jpg" /&gt; &lt;img class="fadeto" src="nature.jpg" /&gt; &lt;img class="fadeto" src="nature.jpg" /&gt; &lt;img class="fadeto" src="nature.jpg" /&gt; &lt;img class="fadeto" src="nature.jpg" /&gt; &lt;/div&gt; &lt;div id="feedback"&gt;&lt;/div&gt; </code></pre> <p>Here is my jQuery script:</p> <pre><code>&lt;script&gt; $(document).ready(function(){ $('.fadeto').hover(function(){ $(this).fadeTo(100, 1); },function() { if(!$(this).hasClass('selected')) $(this).fadeTo(100,0.4, function(){ $(this).removeAttr('style'); //removed IF not selected document.getElementById('feedback').innerHTML +=$(this).attr('style'); }); else { $(this).removeAttr('style'); //removed IF selected document.getElementById('feedback').innerHTML +=$(this).attr('style'); } }) .click(function(){ $(this).toggleClass('selected'); }); $('#Toggle_Button').click(function(){ $('.fadeto').toggleClass('selected'); }); }); &lt;/script&gt; </code></pre> <p>Whenever I move the mouse around the images in normal speed, with no rush, everything works perfectly. But whenever I try and move the mouse over the elements fast, it causes a bug with the Toggle button: Some elements remain with opacity 1.0.</p> <p>I remove the style attribute after each animation is finished, because I don't want any element to stay with style="opacity:1;", since it would overwrite any conflicting CSS Class Rule that is applied to the element.</p> <p>I have included the feedback <code>&lt;div&gt;</code>, so that I can keep track whether the style attribute is removed or not, and yes, no matter how fast the mouse moves, the code inside there is executed, and style is undefined.</p> <p>Also, I know that stylesheets are read from top to bottom, so I have included the 'selected' class after 'fadeto', since its opacity rule has more priority than the other's.</p> <p>If there is a problem with my code, please help me? Otherwise, what can I do? What do you suggest?</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