javascript - How to pause slideshow when hovering -


how add pause effect when hover on image in jquery slideshow?

$(document).ready(function () {     slideshow(); });  function slideshow() {     var showing = $('#slideshow .show');     var next = showing.next().length ? showing.next() : showing.parent().children(':first');     var timer;     showing.fadeout(500, function () {         next.fadein(200).addclass('show');     }).removeclass('show');     settimeout(slideshow, 3000); } 

var hovering = false;               //default not hovering $("#slideshow").hover(function () { //*replace body element     hovering = true;                //when hovered, hovering true }, function () {     hovering = false;               //when un-hovered, hovering false     slideshow();                    //start process again });  function slideshow() {     if(!hovering) {                 //if not hovering, proceed         /* code here*/         nextslide();         settimeout(slideshow, 1000);     } }  function nextslide(){     var showing = $('#slideshow .show');     var next = showing.next().length ? showing.next() : showing.parent().children(':first');     var timer;     showing.fadeout(500, function () {         next.fadein(200).addclass('show');     }).removeclass('show'); } 

demo: http://jsfiddle.net/derekl/mqebz/


Comments

Popular posts from this blog

get url and add instance to a model with prefilled foreign key :django admin -

css - Make div keyboard-scrollable in jQuery Mobile? -

ruby on rails - Seeing duplicate requests handled with Unicorn -