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効果をより明確にする間隔。