jquery - 我创建了一个淡入淡出 jquery 内容框，我希望它在 mouseenter 上停止

Question

在这段代码中，我正在制作一个带有数据的框，这些数据一个接一个地显示两个 li 框，但我希望它在鼠标进入它时停止，并在鼠标离开时计数。

演示

CSS：

ul.bxslider li{
width:77%;
margin: 50px 0 0 80px;
height:150px;
display:none;
text-align:left;
font-size: 20px;
font-weight:normal;
font-family: 'Playball', cursive;
}

HTML 代码：

 <ul class="bxslider">
      <li class="fader">1)&nbsp;&nbsp;Testimonial ticker goest here,
               showing all testimonials one by one.
               &nbsp;&nbsp;&nbsp;&nbsp;Testimonial ticker goest here, showing
               all testimonials one by one.&nbsp;&nbsp;&nbsp;Testimonial ticker
               goest here, showing all testimonials one by one
     </li>
     <li class="fader">2)&nbsp;&nbsp;Testimonial ticker goest here,
            showing all testimonials one by one<br />
            &nbsp;&nbsp;&nbsp;&nbsp;Testimonial ticker goest here, showing
            all testimonials one by one<br />
            &nbsp;&nbsp;&nbsp;&nbsp;Testimonial ticker goest here, showing
            all testimonials one by one
    </li>

    </ul>

JavaScript 代码：

    $(document).ready(function(fadeLoop) {

        var fad = $('.fader');
        var counter = 0;
        var divs = $('.fader').hide(); // Selecting fader divs instead of each by name.
        var dur = 500;

        fad.children().filter('.fader').each(function(fad) {

            function animator(currentItem) {

                animator(fad.children(":first"));

                fad.mouseenter(function(){
                    $(".fader").stop(); 
                });
                fad.mouseleave(function(){
                    animator(fad.children(":first"));
                });
            };

        });

        function showDiv() {
            divs.fadeOut(dur) // hide all divs
                .filter(function(index) {
                    return index == counter % divs.length;
                }) // figure out correct div to show
                .delay(dur) // delay until fadeout is finished
                .fadeIn(dur); // and show it
            counter++;
        }; // function to loop through divs and show correct div

        showDiv(); // show first div    

        return setInterval(function() {  // return interval so we can stop the loop
            showDiv(); // show next div
        }, 2 * 1000); // do this every 5 seconds    
   });

// JavaScript Document

Answer 1

您有两个包含所有推子的变量。我假设你想要一个用于推子，一个用于ul.

var fad = $('.bxslider');
var divs = $('.fader').hide();
var dur = 500;

我们可以创建一个变量来保存下一个元素，以及一个指示动画是否应该停止的变量。

var stop = false;
var next = $();

我们可以检查鼠标是否在整个列表上，这是更可靠的。

fad.mouseenter(function(){
    stop = true;
});
fad.mouseleave(function(){
    stop = false;
}); 

我们新的和改进的showDiv功能检查我们是否需要在做任何事情之前停止。它也进行了重组，以确保当我们告诉它停止动画时我们会有一些可见的东西。

function showDiv() {
    if (stop) return;
    if (next.length) {
        next.fadeOut(dur);
    }
    next = next.next();
    if (next.length === 0) 
        next = divs.first();
    next.delay(dur).fadeIn(dur);      
};

通常的计时器。我们可以重写它来传递函数。

showDiv();    
setInterval(showDiv, 2 * 1000);   

演示