Question

我想了解一下javascript / jquery。我已经有三个盒子，内容淡入和淡出三个并重复循环。我想要做的是当＆＃34;框x＆＃34;悬停在循环上并且永远不会重新开始，并且悬停的盒子，盒子下方的内容淡入并保持...除非另一个盒子悬停在上面，然后从另一个盒子中消失的内容悬浮的盒子会逐渐消失，新的盒子会悬停在上面，与该盒子重合的内容会逐渐淡入并保持淡入，等等。

我将如何做到这一点？

这是一个jsfiddle示例：http://jsfiddle.net/q0htx0no/

的javascript / jquery的

var infoboxes = $(".count p");
var counter = 0;

function rotate() {
    $(infoboxes[counter]).fadeIn(1000, function() {
        setTimeout(function() {
            $(infoboxes[counter]).fadeOut(1000, function() {
                counter = counter < infoboxes.length - 1 ? counter + 1 : 0;
                rotate();
            })
        }, 1000);
    });
}

$(function() { 
    rotate(); 
});

感谢您的帮助

Answer 1

一个选项是使用一个全局变量（'flag'）来指示是否应该停止旋转。一旦盒子悬停在上面，它应该设置为True并且应该在特定的盒子中淡出。

Answer 2

是的，使用全局变量。像这样：

var infoboxes = $(".count p");
var counter = 0;
var goAhead = true;

function rotate() {
    $(infoboxes[counter]).fadeIn(1000, function() {
        setTimeout(function() {
            $(infoboxes[counter]).fadeOut(1000, function() {
                counter = counter < infoboxes.length - 1 ? counter + 1 : 0;
                checkRotate();
            })
        }, 1000);
    });
}

function checkRotate() {
    if (goAhead) { rotate(); }
}

$('.about').on('mouseover', function() {
    goAhead = false;
    var index = $(this).index();
    var boxesToClear = $(infoboxes).filter(function(i) { return i !== index; });
    $(boxesToClear).fadeOut(1000, function() {
        $(infoboxes[index]).fadeIn(1000);
    });
});

checkRotate();

DEMO

Answer 3

这是一种方法。它可能会得到改善。

http://jsfiddle.net/vbt67x0h/2/

var infoboxes = $(".count p");
var counter = 0;
var isrotating = false;

function rotate(){
 isrotating = true;
 $(infoboxes[counter]).fadeIn(1000).delay(1000).fadeOut(1000);
 counter = counter < infoboxes.length - 1 ? counter + 1 : 0;
}

//immediately stop rotate and hide all
function stoprotate(){
    clearInterval(tmrrotate);
    isrotating = false;
    for(var x=0;x<infoboxes.length;x++){
     $(infoboxes[x]).stop();
     $(infoboxes[x]).hide();
    }
}

rotate();

//rotate every 3 seconds, 1 to fadein, 1 to pause, 1 to fadeout
var tmrrotate = setInterval(function() {
    rotate();
  }, 3000); 

$(".about").on('mouseover', function() {
    if(isrotating){stoprotate()}
    $(infoboxes[$(this).index()]).fadeIn(1000);
    })
  .on('mouseleave', function() {
    $(infoboxes[$(this).index()]).fadeOut(1000);
});

Answer 4

你应该制作一个定时数组：

var arTimer = [];

并将所有计时器推送到该数组中，悬停时clearTimeout并仅显示悬停的索引：

var infoboxes = $(".count p");
var counter = 0;
var arTimer = [];

function rotate() {
    $(infoboxes[counter]).fadeIn(1000, function() {
        arTimer.push(setTimeout(function() {
            $(infoboxes[counter]).fadeOut(1000, function() {
                counter = counter < infoboxes.length - 1 ? counter + 1 : 0;
                rotate();
            })
        }, 1000));
    });
}

function cleararTimer(){
    for (var i = 0; i < arTimer.length; i++) {
        clearTimeout(arTimer[i]);
    }
}

$(function() { 
    rotate();
    $('.about').on('mouseover', function(){
        cleararTimer();
        var hovered = $(this).index();
        $('.count p').not(':eq('+hovered+')').fadeOut(1000);
        $('.count p:eq('+hovered+')').fadeIn(1000);
    });
});

jsFiddle Example

停止循环并淡入悬停的区域

4 个答案: