Wednesday 15 May 2013

jquery - How to stop slider from animating on hover? -


1. Stop / pause / release animation when mouse over / off image?

When my mouse is hovering over my image, I want to stop the image, while the mouse is hovering over it. Then I will continue to scroll through the images when the mouse is out of the image.

  jQuery (function ($) {// settings var $ slider = $ ('slider'); // class or carousel slider using var $ slide = 'li'; // You can also use 'img' if you are not using a UL var $ transition_time = 4000; // millseconds var $ time_between_slides = 1000; // Millions of cents Var $ stopAnimating = true; var timeout; function slides () {$ Slider.find ($ Slide);} Slides (). FadeOut (); // Set Active Classes Slide (). First () AddClass ('Activate'); Slide (). First (). FadeIn ( $ Transition_time); $ interval = ''; // auto scroll $ interval = to Interval (function () {var $ i = $ slider.find ($ slide + 'ed. $ I) .fadeOut ($ transition_time); if (slides). Length = = $ I + 1) $ I = -1; // Loop to start the slides. (Eq ($ i + 1). FadeIn ($ transition_time); Slide (). Eq ($ i + 1) .addClass ('active');} , $ Transition_time + $ time_between_slides); Slide (). Mouseover (function () {sli des () stop; SetInterval = 0; Warning ('mousein');}); Slides (). Mouseout (function () {warning ('mouseout');}); });   

This is a very easy thing but it is clear that a new man thanks in the field

You are in luck user2512393 because I already figure it out. This will help you.

Wrap the interval in the function, declare the interval variable, return the function to the outside and set the hover over the newly created function.

  JQuery (function ($) {// settings var $ slider = $ ('. Slider'); // class or carousel slider using var $ slide = 'img'; // Can also use 'img' if you 're again a ul var $ transition_time = 1000; // 1 second var $ time_between_slides = 4300; // 4 seconds var $ interval; function slides (return) $ slider.find ($ Slide);} slides (). (); // active sections slide (). (First). AddClass ('active'); slide (). First () .FadeIn ($ transition_time); // auto scroll Function startloop () {$ interval = set interval (funk Index () {var $ i = $ slider.find ($ slide + '.active') Index (); Slide (). Eq ($ i) .removeClass ('active'); Slide (). Eq ($ I) .FadeOut ($ transition_time); if (slide (). Length == $ i + 1) $ i = -1; // loop to start the slide. (Eq ($ i + 1). FadeIn ( $ Transition_time); Slide (). Eq ($ i + 1) .addClass ('active');} $ transition_ time + $ time_between_slides;} function pauseLoop () {window.clearInterval ($ gaps);} $ ( ".l slider"). Hover (function () {// warning ("pause"); Pause loop (); // stop loop}, function () {// warning ("unpause"); Startloop); // scroll ()}); Return startloop (); });   

This code is located on.

Now, I am trying to implement touch recognition to prevent this from happening on mobile devices.

No comments:

Post a Comment