停止循環並褪色在區域上徘徊

我有點javascript/jquery我想弄明白。我已經有三盒內容淡入淡出，並循環播放三遍和重複。我想要做的是當「box x」懸停在循環上淡出並停止不再啓動，並且懸停的盒子，盒子下面的內容淡入並保持......除非另一個盒子是那麼從另一個懸掛框中消失的內容將淡出，並且懸停的新框，與該框重合的內容淡入並保持淡入，等等。停止循環並褪色在區域上徘徊

我該怎麼做呢？

這裏是一個的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(); 
});

感謝所有幫助

來源

2014-09-19 Chipe

你的小提琴不見了 – 2014-09-19 04:20:23

對不起，@General_Twyckenham它現在在那裏 – Chipe 2014-09-19 04:21:42

[這裏]（http://jsfiddle.net/q0htx0no/2/）有一個cookie。 – 2014-09-19 05:45:08

一種選擇是將有一個全局變量（一個 '標誌'）那會指出是否應該停止旋轉。一旦一個盒子被盤旋，它應該被設置爲真，並且應該在該特定盒子中淡入。

來源

2014-09-19 04:25:42

是的，使用全局變量。事情是這樣的：

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

來源

2014-09-19 05:15:00 bowheart

下面是做到這一點的方法之一。它可能可以改進。

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

來源

2014-09-19 05:22:20

你應該定時數組：

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

來源

2014-09-19 05:47:15

停止循環並褪色在區域上徘徊

回答

相關問題