Cancel Jquery Slider event on mousehover

Question

I wrote the following code to attempt to cancel an event on mousehover. the goal is to keep the slide event from happening if a slide is currently being hovered. Is it possible to cancel the slide event if the current slide is being hovered? Here is my code:

Jquery

<script type="text/javascript">
$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 560;
  var slides = $('.slide');
  var numberOfSlides = slides.length;

  // Remove scrollbar in JS
  $('#slidesContainer').css('overflow', 'hidden');

  // Wrap all .slides with #slideInner div
  slides
    .wrapAll('<div id="slideInner"></div>')
    // Float left to display horizontally, readjust .slides width
    .css({
      'float' : 'left',
      'width' : slideWidth
    });

  // Set #slideInner width equal to total width of all slides
  $('#slideInner').css('width', slideWidth * numberOfSlides);

  // Insert controls in the DOM
  $('#slideshow')
    .prepend('<span class="control" id="leftControl">Clicking moves left</span>')
    .append('<span class="control" id="rightControl">Clicking moves right</span>');

  // Hide left arrow control on first load
  manageControls(currentPosition);

  // Create event listeners for .controls clicks
  $('.control')
    .bind('click', function(){
    // Determine new position
    currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;

    // Hide / show controls
    manageControls(currentPosition);
    // Move slideInner using margin-left
    $('#slideInner').animate({
      'marginLeft' : slideWidth*(-currentPosition)
    });
  });


     // manageControls: Hides and Shows controls depending on currentPosition
      function manageControls(position){
                if(position >= 4)
                {
                    position=0;
                    currentPosition=0;
                }

      } 

      function Aplay(){
        // Determine new position
        currentPosition =  currentPosition+1 ;

        // Hide / show controls
        manageControls(currentPosition);
        // Move slideInner using margin-left
        $('#slideInner').animate({
          'marginLeft' : slideWidth*(-currentPosition)
        });
          setTimeout(function(){Aplay();},5000);
      }
      setTimeout(Aplay(),50000);
});
</script>

HTML

<div id="slideshow">
    <div id="slidesContainer">
      <div class="slide">
        <h2>Web Development Tutorial</h2>
        <p><a href="#"><img src="img/img_slide_01.jpg" alt="An image that says Install X A M P P for wordpress." width="215" height="145" /></a>If you're into developing web apps, you should check out the tutorial called "<a href="#">Using XAMPP for Local WordPress Theme Development</a>"</p>
      </div>
      <div class="slide">
        <h2>Grunge Brushes, Anyone?</h2>
        <p><a href="#"><img src="img/img_slide_02.jpg" width="215" height="145" alt="A thumbnail image that says S R grunge photoshop brushes 6 high resolution grunge brushes by six revisions." /></a>In this layout, I used <a href="#">SR Grunge</a>,</p>
        <p> 
      </div>
      <div class="slide">
        <h2>How About Some Awesome Grunge Textures?</h2>
        <p><a href="#"><img src="img/img_slide_03.jpg" width="215" height="145" alt="A thumbnail image that says grunge extreme 15 free high resolution grunge textures six revisions." /></a>The texture used in this web page is from the Grunge Extreme Textures freebie set by JC Parmley released here on Six Revisions.</p>
        <p>You can head over to the <a href="#">Grunge Extreme</a> page to download the texture set or check out Six Revisions' <a href="#">freebie section</a> for even more goodies!</p>
      </div>
      <div class="slide">
        <h2>'Tis the End, My Friend.</h2>
        <p><a href="#"><img src="img/img_slide_04.jpg" width="215" height="145" alt="Thumbnail image that says sleek button using photoshop that links to a Photoshop tutorial." /></a></p>
        <p> web interface.</p>
      </div>
    </div>
  </div>
  <!-- Slideshow HTML -->

</div>

Answer 1

Live demo

Replace the Javascript bottom part with this code:

 var timeout = null;
      function Aplay(){
        // Determine new position
        currentPosition =  currentPosition+1 ;

        // Hide / show controls
        manageControls(currentPosition);
        // Move slideInner using margin-left
        $('#slideInner').animate({
          'marginLeft' : slideWidth*(-currentPosition)
        });
        timeout = setTimeout(function(){Aplay();},5000);
      }
      timeout = setTimeout(function(){Aplay();},5000);

    $('#slideshow').hover(function(){
        clearTimeout(timeout);
    },function(){
       timeout = setTimeout(function(){Aplay();},5000);
    });

Exaplanation:

create a variable called timeout that will contain the setTimeout event
The $('slideshow').hover(...) will stop the event when the mouse is over it, then will re assign it to timeout when mouse exit the slideshow

Edit

Solution for the question by OP on the comments below:

Add this in the html:

<span id="numbering">1</span>

Add this functions in JS:

function updateNumber(){
     $('#numbering').text((+$('#numbering').text())%4 + 1);
}

Then call it in the functions that are involved with the sliding of the images, so when text clicked and when automatically sliding.

Live demo

Answer 2

you should use

.hover( handlerIn, handlerOut )

jQuery .hover() API will help you achieve what you want.

Answer 3

.stop() will stop all animations so try adding a mouseover to your slider elements

<div id="slide1" class="slide" onmouseover='$("#" + this.id).stop();'></div>

Or you could bind the listeners

$('.slide').mouseover(function(){ $("#" + this.id).stop(); });