如何在mouseout時停止mouseenter功能

Question

這是我用於滑塊的代碼

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

    setInterval(function () {
        moveRight();
    }, 1000);

    var slideCount = $('#slider ul li').length;
    var slideWidth = $('#slider ul li').width();
    var slideHeight = $('#slider ul li').height();
    var sliderUlWidth = slideCount * slideWidth;

    $('#slider').css({ width: slideWidth, height: slideHeight });

    $('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });

    $('#slider ul li:last-child').prependTo('#slider ul');

    function moveLeft() {
        $('#slider ul').animate({
            left: + slideWidth
        }, 200, function () {
            $('#slider ul li:last-child').prependTo('#slider ul');
            $('#slider ul').css('left', '');
        });
    };

    function moveRight() {
        $('#slider ul').animate({
            left: - slideWidth
        }, 200, function () {
            $('#slider ul li:first-child').appendTo('#slider ul');
            $('#slider ul').css('left', '');
        });
    };


    $('a.control_prev').click(function () {
        moveLeft();
    });

    $('a.control_next').click(function () {
        moveRight();
    });

});    

我嘗試創建一個函數，使懸停時幻燈片顯示更慢，並恢復正常，為什么光標離開它。 這是我的代碼。

 function moveNot() {
            $('#slider ul').animate({
                left: - slideWidth
            }, 20000, function () {
                $('#slider ul li:first-child').appendTo('#slider ul');
                $('#slider ul').css('left', '');
            });
        };



        $('#slider').mouseover(function () {

            moveNot();

        });

        $('#slider').mouseout(function () {

            setInterval(function () {
            moveRight();
        }, 1000);

        });

我能夠使滑塊變慢，但是mouseout或mouseleave（兩者都試過）不起作用，我不知道還能做什么。

如何在懸停時停止滑塊並在鼠標關閉時使滑塊移動？

Answer 1

請嘗試以下代碼。

 jQuery(document).ready(function ($) { var slidetime = 500; var t; $('#slider li').on('mouseout',function(){ slidetime = 500; clearInterval(t); startAnimation(); }); $('#slider li').on('mouseenter',function(){ //slidetime = 1000; if want to make it slower uncomment it clearInterval(t); //startAnimation(); if want to make it slower uncomment it }); function startAnimation(){ t = setInterval(function () { moveRight(); }, slidetime); } startAnimation(); var slideCount = $('#slider ul li').length; var slideWidth = $('#slider ul li').width(); var slideHeight = $('#slider ul li').height(); var sliderUlWidth = slideCount * slideWidth; $('#slider').css({ width: slideWidth, height: slideHeight }); $('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth }); $('#slider ul li:last-child').prependTo('#slider ul'); function moveLeft() { $('#slider ul').animate({ left: + slideWidth }, slidetime, function () { $('#slider ul li:last-child').prependTo('#slider ul'); $('#slider ul').css('left', ''); }); }; function moveRight() { $('#slider ul').animate({ left: - slideWidth }, slidetime, function () { $('#slider ul li:first-child').appendTo('#slider ul'); $('#slider ul').css('left', ''); }); }; }); 

  li{ width:100px; height:100px; float:left; display:block; } ul:nth-child(even){ background:red; } ul:nth-child(odd){ background:black; color:red; } ul{ display:inline-flex; } #slider{ width:100px; overflow:hidden; } 

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="slider"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> </div> 

這是JSfiddle 鏈接

Answer 2

您的代碼的一個明顯問題是mouseout函數，它將重復setInterval 。 請注意，如果您希望它停止運行，您需要調用clearInterval()來“取消注冊”該函數...

對你的問題

如何在懸停時停止滑塊並在鼠標關閉時使滑塊移動？

你可能會嘗試這樣的事情：

var myVar;  // rename it to something makes sense to you

$('#slider').mouseover(function(){
    clearInterval(myVar);
});

$('#slider').mouseout(function (){
    myVar = setInterval(function(){
        moveRight();
    }, 1000);
});

在這里查看clearInterval函數。

Answer 3

在任何事情之前，你應該將setInterval添加到一個變量，你可以在再次調用同一個函數之前用clearInterval()清除它。 我想你應該把時間作為特定函數中的參數：

jQuery(document).ready(function ($) {
   var time, 
       callRight = function(time){
          time = setInterval(function () {
              moveRight(time);
          }, time);
       };

       callRight(200); // <----call it here

       // other code as is

});

現在這些是您應該使用的更改：

function moveRight(time) {// <----pass the duration here.
  $('#slider ul').stop(true, true).animate({
    left: -slideWidth
  }, time, function() {// <----add the duration here.
    $('#slider ul li:first-child').appendTo('#slider ul');
    $('#slider ul').css('left', '');
  });
};

function moveNot(time) { // <----pass the duration here.
  $('#slider ul').stop(true, true).animate({
    left: -slideWidth
  }, time, function() { // <----add the duration here.
    $('#slider ul li:first-child').appendTo('#slider ul');
    $('#slider ul').css('left', '');
  });
};

$('#slider').on('mouseenter mouseleave', function(e) {
  if(e.type === 'mouseenter' && time){
     clearInterval(time); 
     moveNot(20000);
  } else {
     callRight(200);
  }
});

Answer 4

而是使用hover而不是mouseover和mouseout

$('#slider').hover(function(){
    moveNot()
    },function () {
        setInterval(function(){
            moveRight()
    }, 1000)
});