如何停止滑塊動畫懸停？

1.鼠標懸停/關閉圖像時，如何暫停/停止/繼續動畫？如何停止滑塊動畫懸停？

當我的鼠標懸停在我的圖像上時，我希望圖像在鼠標懸停在圖像上時暫停。然後，當鼠標不在圖像中時，我希望它繼續滾動圖像。

jQuery(function ($){ 
    // settings 
    var $slider = $('.slider'); // class or id of carousel slider 
    var $slide = 'li'; // could also use 'img' if you're not using a ul 
    var $transition_time = 4000; //millseconds 
    var $time_between_slides = 1000; //millseconds 
    var $stopAnimating = true; 
    var timeout; 
    function slides() { 
     return $slider.find($slide); 
    } 

    slides().fadeOut(); 
    // set active classes 
    slides().first().addClass('active'); 
    slides().first().fadeIn($transition_time); 
    $interval = ''; 


    // auto scroll 
    $interval = setInterval(function(){ 
     var $i = $slider.find($slide + '.active').index(); 
     slides().eq($i).removeClass('active'); 
     slides().eq($i).fadeOut($transition_time); 
     if (slides().length == $i + 1) $i = -1; // loop to start   
     slides().eq($i + 1).fadeIn($transition_time); 
     slides().eq($i + 1).addClass('active');   
    }, $transition_time + $time_between_slides); 

    slides().mouseover(function() { 
     slides().stop; 
     setInterval = 0; 
     alert('mousein'); 
    }); 

    slides().mouseout(function() { 

     alert('mouseout'); 
    }); 



});

這是一件很容易的事情。但它顯而易見我是一個在該領域的新人謝謝

來源

2013-06-22 user2512393

停止'mouseenter'事件的時間間隔並在'mouseleave'事件中重新啓動它。搜索它，如果它沒有意義。 – Tim

請詳細描述您的問題。這有助於爲答案和其他人有類似的問題 – jokklan

可能重複[重新啓動圖片庫時鼠標不懸停]（http://stackoverflow.com/questions/24876436/restart-image-gallery-when-mouse-是 - 不懸停） – mplungjan

-1

你在運氣@ user2512393因爲我已經知道了。這link會幫助你。

在函數中包裝間隔，聲明間隔變量，將函數返回到外部並將懸停設置爲新建函數。

jQuery(function ($) { 

    // settings 
    var $slider = $('.slider'); // class or id of carousel slider 
    var $slide = 'img'; // could also use 'img' if you're not using a ul 
    var $transition_time = 1000; // 1 second 
    var $time_between_slides = 4300; // 4 seconds 
    var $interval; 

    function slides() { 
     return $slider.find($slide); 
    } 

    slides().fadeOut(); 

    // set active classes 
    slides().first().addClass('active'); 
    slides().first().fadeIn($transition_time); 

    // auto scroll 
    function startloop(){ 
    $interval = setInterval(

    function() { 
     var $i = $slider.find($slide + '.active').index(); 

     slides().eq($i).removeClass('active'); 
     slides().eq($i).fadeOut($transition_time); 

     if (slides().length == $i + 1) $i = -1; // loop to start 

     slides().eq($i + 1).fadeIn($transition_time); 
     slides().eq($i + 1).addClass('active'); 
    }, $transition_time + $time_between_slides); 
} 
    function pauseLoop() { 
     window.clearInterval($interval); 
    } 

    $(".slider").hover(

    function() { 
     //alert("pause"); 
     pauseLoop(); // pause the loop 
    }, 

    function() { 
     //alert("unpause"); 
      startloop(); //scroll() 
    }); 
    return startloop(); 
});

此代碼位於github。

現在，我試圖實現觸摸檢測，以暫停它在移動設備上。

來源

2014-10-27 21:36:40

如何停止滑塊動畫懸停？

回答

相關問題