javascript - 从另一个函数中淡出一个函数

Question

我有一个函数，它在连续的四个盒子中淡入淡出，然后一次又一次循环。框 1 淡入和淡出，然后是框 2，然后是框 3，最后是框 4。这是在一个函数中完成的。

我有另一个功能，当用户将鼠标悬停在这些框之一的标题上时，该框将淡入。然后，当用户将鼠标悬停时，该框就会淡出。我想在该函数中做的是，当它们悬停在框上方的标题之一时，控制循环的函数(startSlider)将淡出，然后当它们悬停在标题之外时，循环再次开始。

这是一些代码:

function startSlider(){
    //code that is looping through each box is here
};

function hoverHere(){
    $('.headings .b1').on("mouseenter", function(){
        $('.box #1').fadeIn(300);
        //startslider() fade out this function
    })
    .on("mouseleave", function(){
        $('.box #1').fadeOut(300);
        //startslider() begins again
    });

    //there is the same code here for .b2 and .box #2 and so on
}

感谢您提供有关如何在悬停有效时停止此函数循环以及如何在悬停关闭时启动 startSlider() 函数的帮助。

Answer 1

我已将所有内容放入一个函数中，因此所有变量都将是在范围内..我还使用 .index() 它为您提供元素的索引关于其父级(单击的框和受影响的信息框之间连接的更简单的方法。为了让循环立即开始，我将实际的滑动函数与循环间隔分开，因此您可以在开始时单独调用该函数，然后开始循环。注意，您只需要调用 doc 中的 startSlider() 函数准备好。如果您有任何问题，请告诉我。如果您宁愿以其他方式执行并且只希望循环函数立即启动，那么您可以像示例中那样分离滑动函数。

function startSlider(){

    // timer
    var loop = 0;

    // get total boxes
    var count=$('.box .info').length; 

    // slide index
    var sliderIndex = 0;

    // boxes
    var boxes = $(".headings").children("div");

    // info boxes
    var infoboxes = $("#main_cont").find(".info");

    // bind boxes hover
    boxes.off().on('mouseenter', handlehover);

    function resetSlider() {
        window.clearInterval(loop);
        loop=window.setInterval(moveSlider, 2000);
    }
    function moveSlider() {
        if(sliderIndex+1 == count){  //will reset to first image when last image fades out
            sliderIndex = 0;
        }
        infoboxes.fadeOut(400);
        infoboxes.eq(sliderIndex).fadeIn(400); // slider image + the next image in the slider

        sliderIndex++;
    }

    function handlehover() {
        var boxnum = $(this).index();

        boxes.off().on('mouseleave', resetSlider);
        pauseSlider();
    }

    function pauseSlider() {
        window.clearInterval(loop);
        infoboxes.not(":eq("+boxnum+")").fadeOut(400);
        infoboxes.eq(boxnum).fadeIn(400);

    }
}

$(function() {
    startSlider();
});