Pause jQuery sur Hover (Mouse Over)

Question

J'ai regardé autour mais je n'ai rien trouvé, veuillez voir ci-dessous pour mon code. En ayant cela à l'esprit, j'ai juste besoin de pouvoir mettre en pause l'animation sur le pointeur de la souris.

Toute aide est grandement appréciée!

(function ($) { 
 
\t $.fn.textSlider = function (options) { 
 

 
\t \t /* Default settings */ 
 
\t \t var settings = $.extend(
 
\t \t \t { 
 
\t \t \t \t timeout: 2000, 
 
\t \t \t \t slideTime: 750, 
 
\t \t \t }, 
 
\t \t \t options 
 
\t \t); 
 

 
\t \t var nextItem; 
 

 
\t \t var currentItem = 0; 
 
\t \t var count = 0; 
 

 
\t \t this.children('.slider-item').each(
 
\t \t \t function() 
 
\t \t \t { 
 
\t \t \t \t $(this).addClass('slide-' + (count)) 
 
\t \t \t \t \t .css(
 
\t \t \t \t \t \t { 
 
\t \t \t \t \t \t \t //opacity: \t 0, 
 
\t \t \t \t \t \t \t //paddingTop: \t '100px', 
 
\t \t \t \t \t \t \t //paddingBottom: '0px' 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t); 
 
\t \t \t \t $(this).hide(); 
 
\t \t \t \t count++; 
 
\t \t \t } 
 
\t \t); 
 

 
\t \t function firstSlide() 
 
\t \t { 
 
\t \t \t $('.slide-' + currentItem).show().animate({ 
 
\t \t \t \t //paddingTop: '0px', paddingBottom: '50px', 
 
\t \t \t \t opacity: 1 }, settings.slideTime); 
 

 
\t \t \t setTimeout (transition, settings.timeout); 
 
\t \t } 
 

 
\t \t function transition() 
 
\t \t { 
 
\t \t \t nextItem = parseInt (currentItem + 1); 
 

 
\t \t \t if (nextItem >= count) 
 
\t \t \t \t nextItem = 0; 
 

 
\t \t \t $('.slide-' + currentItem).animate({ 
 
\t \t \t \t //paddingTop: '100px', paddingBottom: '0px', 
 
\t \t \t \t opacity: 0 }, settings.slideTime, function() { 
 
\t \t \t \t \t $(this).hide(); 
 
\t \t \t \t \t $('.slide-' + nextItem).show().animate({ 
 
\t \t \t \t \t \t //paddingTop: '0px', paddingBottom: '50px', 
 
\t \t \t \t \t \t opacity: 1 }, settings.slideTime); 
 
\t \t \t }); 
 

 
\t \t \t currentItem = nextItem; 
 
\t \t \t setTimeout (transition, settings.timeout); 
 
\t \t } 
 
\t \t return firstSlide(); 
 
\t }; 
 
}(jQuery)); 
 

 
// Start the Text Slider 
 
\t $('.slide').textSlider({ 
 
\t \t timeout: 5000, 
 
\t \t slideTime: 650, 
 
\t \t loop: 1 
 
\t });

/* Main Message & Text */ 
 
.main-message { 
 
\t font-size: 150%; 
 
\t font-weight: bold; 
 
\t padding-bottom: 20px; 
 
\t margin-left: 20px; 
 
} 
 
.main-text { 
 
\t font-size: 110%; 
 
\t margin-left: 20px; 
 
}

<!-- Start Text Slider --> 
 
\t \t <div class="slide"> 
 
\t \t \t <div class="slider-item"> 
 
\t \t \t \t <div class="main-message">Test 1</div> 
 
\t \t \t \t <div class="main-text">Sub text here 1</div> 
 
\t \t \t </div> 
 
\t \t \t <div class="slider-item"> 
 
\t \t \t \t <div class="main-message">Test 2</div> 
 
\t \t \t \t <div class="main-text">Sub text here 2</div> 
 
\t \t \t </div> 
 
\t \t \t <div class="slider-item"> 
 
\t \t \t \t <div class="main-message">Test 3</div> 
 
\t \t \t \t <div class="main-text">Sub text here 3</div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t <!-- End Text Slider --> 
 
    
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Answer 1

Dans votre transition de fonction () {... vous pouvez ajouter au début:

// if mouse is hover element call again the settimeout... 
if ($('.slide-' + currentItem + ':hover').length != 0) { 
    setTimeout(transition, settings.timeout); 
    return; 
} 

Un sol différent ution peut être basée sur .hover(), en ajoutant le gestionnaire d'événements suivant:

this.children('.slider-item').hover(
     function (e) { 
      $(this).addClass('hover'); 
     }, 
     function (e) { 
      $(this).removeClass('hover'); 
     } 
); 

et, donc, le changement du premier code proposé avec:

// if element has hover class call again the settimeout... 
if ($('.slide-' + currentItem + '.hover').length != 0) { 
    setTimeout(transition, settings.timeout); 
    return; 
} 

L'extrait:

(function ($) { 
 
    $.fn.textSlider = function (options) { 
 

 
     /* Default settings */ 
 
     var settings = $.extend(
 
       { 
 
        timeout: 2000, 
 
        slideTime: 750, 
 
       }, 
 
       options 
 
     ); 
 

 
     var nextItem; 
 

 
     var currentItem = 0; 
 
     var count = 0; 
 

 
     this.children('.slider-item').each(function() { 
 
        $(this).addClass('slide-' + (count)) 
 
          .css({ 
 
           //opacity: \t 0, 
 
           //paddingTop: \t '100px', 
 
           //paddingBottom: '0px' 
 
          } 
 
        ); 
 
        $(this).hide(); 
 
        count++; 
 
       } 
 
     ); 
 
     
 
     this.children('.slider-item').hover(
 
       function (e) { 
 
        $(this).addClass('hover'); 
 
       }, 
 
       function (e) { 
 
        $(this).removeClass('hover'); 
 
       } 
 
     ); 
 

 

 
     function firstSlide() { 
 
      $('.slide-' + currentItem).show().animate({ 
 
       //paddingTop: '0px', paddingBottom: '50px', 
 
       opacity: 1 
 
      }, settings.slideTime); 
 

 
      setTimeout(transition, settings.timeout); 
 
     } 
 

 
     function transition() { 
 
      if ($('.slide-' + currentItem + '.hover').length != 0) { 
 
       setTimeout(transition, settings.timeout); 
 
       return; 
 
      } 
 
      nextItem = parseInt(currentItem + 1); 
 

 
      if (nextItem >= count) 
 
       nextItem = 0; 
 

 
      $('.slide-' + currentItem).animate({ 
 
       //paddingTop: '100px', paddingBottom: '0px', 
 
       opacity: 0 
 
      }, settings.slideTime, function() { 
 
       $(this).hide(); 
 
       $('.slide-' + nextItem).show().animate({ 
 
        //paddingTop: '0px', paddingBottom: '50px', 
 
        opacity: 1 
 
       }, settings.slideTime); 
 
      }); 
 

 
      currentItem = nextItem; 
 
      setTimeout(transition, settings.timeout); 
 
     } 
 

 
     return firstSlide(); 
 
    }; 
 
}(jQuery)); 
 

 

 
// Start the Text Slider 
 
$('.slide').textSlider({ 
 
    timeout: 1000, 
 
    slideTime: 350, 
 
    loop: 1 
 
});

.main-message { 
 
    font-size: 150%; 
 
    font-weight: bold; 
 
    padding-bottom: 20px; 
 
    margin-left: 20px; 
 
} 
 

 
.main-text { 
 
    font-size: 110%; 
 
    margin-left: 20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 

 

 
<div class="slide"> 
 
    <div class="slider-item"> 
 
     <div class="main-message">Test 1</div> 
 
     <div class="main-text">Sub text here 1</div> 
 
    </div> 
 
    <div class="slider-item"> 
 
     <div class="main-message">Test 2</div> 
 
     <div class="main-text">Sub text here 2</div> 
 
    </div> 
 
    <div class="slider-item"> 
 
     <div class="main-message">Test 3</div> 
 
     <div class="main-text">Sub text here 3</div> 
 
    </div> 
 
</div>

Answer 2

Par défaut, jQuery ne prend pas en charge la pause des animations, mais, comme d'habitude, il y a un plugin pour que: http://tobia.github.io/Pause/