悬停时暂停 jQuery（鼠标悬停）

Question

我环顾四周，但没有找到任何东西，请参阅下面的代码。

考虑到这一点，我只需要能够在鼠标悬停时暂停动画。

非常感谢任何帮助！

(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:    0, 
       //paddingTop: '100px',
       //paddingBottom: '0px'
      }
     );
    $(this).hide();
    count++;
   }
  );

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

   setTimeout ( transition, settings.timeout );
  }

  function transition ()
  {
   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: 5000,
  slideTime: 650,
  loop: 1
 });

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

<!-- Start Text Slider -->
  <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>
  <!-- End Text Slider -->
 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Answer 1

默认情况下，jQuery 不支持暂停动画，但是，像往常一样，有一个插件：http://tobia.github.io/Pause/

Answer 2

在你的 函数 transition() {... 你可以在开头添加：

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

不同的解决方案可以基于.hover()，添加以下事件处理程序：

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

因此，将第一个建议的代码更改为：

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

片段：

(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:    0,
                                //paddingTop: '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>

悬停时暂停 jQuery（鼠标悬停）

Pause jQuery On Hover (Mouse Over)

jquery

text

slider

hover

pause