Hi Everyone,
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.
This is how I have the HTML marked up (please ignore the $smarty syntax):
<section class="greenBox">
<ul class="rslides slider1">
<li><img src="{$smarty.const.SITEURL}/images/vane/celebs/hamilton.jpg" data-hover="{$smarty.const.SITEURL}/images/vane/celebs/hamiltonQ.jpg" alt="Lewis Hamilton"></li>
<li><img src="{$smarty.const.SITEURL}/images/vane/celebs/downey.jpg" data-hover="{$smarty.const.SITEURL}/images/vane/celebs/downeyQ.jpg" alt="Robert Downey JR"></li>
<li><img src="{$smarty.const.SITEURL}/images/vane/celebs/mayer.jpg" data-hover="{$smarty.const.SITEURL}/images/vane/celebs/mayerQ.png" alt="John Mayer"></li>
</ul>
</section>
Here is the jQuery:
$(function () {
$(".slider1").responsiveSlides({
maxwidth: 800,
speed: 800,
});
});
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!
I have tried using the stop rule like this:
$(".slider1").mouseover(function(){
$("this").stop();
});
But this has not done anything. Im sure this is really simple, but my jQuery is only at beginner level, any help??