将悬停jQuery悬停

Question

我只想要能够暂停鼠标悬停上的动画。我试图寻找这样做的好方法，但有一些问题。我测试了一些悬停/停止功能，但我无法正常工作。

jQuery(document).ready(function() { 
 
    setInterval(function() { 
 
    jQuery('#testimonials .slide').filter(':visible').fadeOut(1000, function() { 
 
     if (jQuery(this).next('.slide').size()) { 
 
     jQuery(this).next().fadeIn(1000); 
 
     } else { 
 
     jQuery('#testimonials .slide').eq(0).fadeIn(1000); 
 
     } 
 
    }); 
 
    }, 5000); 
 
});

#quote { 
 
    width: 100%; 
 
    height: 130px; 
 
    background-position: center bottom; 
 
    background-repeat: no-repeat; 
 
    margin-bottom: 65px; 
 
    overflow: hidden; 
 
} 
 

 
#testimonials .slide { 
 
    color: #555555; 
 
} 
 

 
#testimonials .testimonial-quote { 
 
    display: inline; 
 
    width: 600px; 
 
    height: 170px; 
 
    margin: 0; 
 
    padding: 0; 
 
    float: left; 
 
    position: relative; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="quote"> 
 
    <div id="testimonials"> 
 
    <div class="slide"> 
 
     <div class="testimonial-quote"> 
 
     <p>Text 1</p> 
 
     <h4 class="title">Title 1</h4> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

可以通过调用clearInterval()当滑动盘旋，然后重新创建的间隔再次当鼠标离开滑动，像这样实现的：

jQuery(document).ready(function($) { 
 
    var $slides = $('#testimonials .slide'); 
 
    
 
    function beginSlideInterval() { 
 
    return setInterval(function() { 
 
     $slides.filter(':visible').fadeOut(1000, function() { 
 
     var $next = $(this).next().length ? $(this).next() : $slides.first(); 
 
     $next.fadeIn(1000); 
 
     }); 
 
    }, 3000); 
 
    } 
 
    
 
    var slideInterval = beginSlideInterval(); 
 
    
 
    $slides.on('mouseenter', function() { 
 
    clearInterval(slideInterval); 
 
    }).on('mouseleave', function() { 
 
    slideInterval = beginSlideInterval(); 
 
    }); 
 
});

#quote { 
 
    width: 100%; 
 
    height: 130px; 
 
    background-position: center bottom; 
 
    background-repeat: no-repeat; 
 
    margin-bottom: 65px; 
 
    overflow: hidden; 
 
} 
 

 
#testimonials .slide { 
 
    color: #555555; 
 
} 
 

 
#testimonials .testimonial-quote { 
 
    display: inline; 
 
    width: 600px; 
 
    height: 170px; 
 
    margin: 0; 
 
    padding: 0; 
 
    float: left; 
 
    position: relative; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="quote"> 
 
    <div id="testimonials"> 
 
    <div class="slide"> 
 
     <div class="testimonial-quote"> 
 
     <p>Text 1</p> 
 
     <h4 class="title">Title 1</h4> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

请注意，我缩短了d使效果更明显的时间间隔。