Databases
StackOverflow2013
Postsdbo
POPausing all animation on mouseover?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POPausing all animation on mouseover?
    text
    copied!<p>OK so I am trying to pause ALL the slide animations on a page. At the moment I have three rows of boxes all using the same slider script, sharing the same class name. What I am trying to do is pause all 3 of those animations when one of them is moused over.</p> <p>I am using the responsive slides script from <a href="http://responsive-slides.viljamis.com/" rel="nofollow">http://responsive-slides.viljamis.com/</a> This is how I have the HTML marked up (please ignore the $smarty syntax):</p> <pre><code>&lt;section class="greenBox"&gt; &lt;ul class="rslides slider1"&gt; &lt;li&gt;&lt;img src="{$smarty.const.SITEURL}/images/vane/celebs/hamilton.jpg" data-hover=" {$smarty.const.SITEURL}/images/vane/celebs/hamiltonQ.jpg" alt="Lewis Hamilton"&gt;&lt;/li&gt; &lt;li&gt;&lt;img src="{$smarty.const.SITEURL}/images/vane/celebs/downey.jpg" data-hover="{$smarty.const.SITEURL}/images/vane/celebs/downeyQ.jpg" alt="Robert Downey JR"&gt;&lt;/li&gt; &lt;li&gt;&lt;img src="{$smarty.const.SITEURL}/images/vane/celebs/mayer.jpg" data-hover="{$smarty.const.SITEURL}/images/vane/celebs/mayerQ.png" alt="John Mayer"&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/section&gt; </code></pre> <p>Here is the jQuery:</p> <pre><code>$(function () { $(".slider1").responsiveSlides({ maxwidth: 800, speed: 800, }); }); </code></pre> <p>Of course I can just add the pause: true; rule to this, however all that does it pause the image moused over while the others continue to change of course. What I am trying to do is keep these images in order, so I need to pause all 3 on mouseover!</p> <p>I have tried using the stop rule like this:</p> <pre><code>$(".slider1").mouseover(function(){ $("this").stop(); }); </code></pre> <p>But this has not done anything. Im sure this is really simple, but my jQuery is only at beginner level, any help??</p> <p>The url of the site I am working on is <a href="http://vane.vanillasoftware.co.uk" rel="nofollow">http://vane.vanillasoftware.co.uk</a></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