Jquery - Configure auto slide

Hey there i got this jquery slider:

http://jsfiddle.net/Jtec5/377/

i added some options (mouseover and mouseout), but i dont know what to put there..

$("#slideshow > div:gt(0)").hide();

setInterval(function() { 
  $('#slideshow > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
},  2000);

$('#stopSlider').mouseover({
    // stop slider
})
$('#stopSlider').mouseout({
    // start slider again
})

Could you take a look? :)

Greetings!!

Answers


Hope this helps: http://jsfiddle.net/Jtec5/378/

$("#slideshow > div:gt(0)").hide();

var startSlideShow = function() { 
        $('#slideshow > div:first')
            .fadeOut(1000)
            .next()
            .fadeIn(1000)
            .end()
            .appendTo('#slideshow');
        },
    interval = setInterval(startSlideShow,  2000);

$('#stopSlide').mouseover(function() {
    clearInterval(interval);
});

$('#stopSlide').mouseout(function() {
    interval = setInterval(startSlideShow, 2000);
});

This is a far cry from an elegant solution, but I hope it gives you a better picture of how event handlers and setInterval work.


Simply declare a variable stopped and set it to true when the mouse hovers the stopSlider-element and false when it leaves it. In the setInterval-function, wrap everything in an if-statement which checks if stopped is true or not.

var stopped=false;
$("#slideshow > div:gt(0)").hide();      
setInterval(function() { 
  if(!stopped){
    $('#slideshow > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
  }
},  2000);

$('#stopSlide').mouseover(function(){
  stopped=true;
})
$('#stopSlide').mouseout(function(){
  stopped=false;
})

The way to synchronize animations in jQuery is by use of the step option. See jQuery Animate Documentation and look under options. You can have a callback method that changes the x position of the other 2 slides synchronously.

The even better way to do animations like this is with CSS3, which if your clients don't support, you can gracefully fall-back to jQuery. I suggest using jQuery Transit. This will handle the fallback for you and keep your code clean.


Need Your Help

Know any voxel graphics C++ libraries?

c++ voxel

So, I'm looking for a voxel graphic engine with C++ libraries (game oriented). Just for fun, it would be the first time I use a graphic library, so it doesn't have to be very complex or powerful, j...

Google Calendar API v3 service account not sending notification when creating an event

node.js oauth-2.0 google-calendar-api service-accounts

I'm trying to use a google service account to create a calendar event (in its own calendar) and invite some attendees.