如何阻止滑块在悬停时动画？答案

【问题标题】：How to stop slider from animating on hover?如何阻止滑块在悬停时动画？
【发布时间】：2013-06-22 21:44:19
【问题描述】：

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');
    });



});

这很容易做到。但很明显我是该领域的新人谢谢

【问题讨论】：

在mouseenter 事件上停止间隔并在mouseleave 事件上重新启动它。如果没有意义，请搜索它。
请详细描述您的问题。这有助于答案和其他有类似问题的人
restart image gallery when mouse is not hovering的可能重复

标签： jquery jquery-animate jquery-hover

【解决方案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。

现在，我正在尝试实现触摸检测以在移动设备上暂停它。

【讨论】：