jQuery的淡入/淡出循環

裏面我用一個簡單的jQuery函數創建一個小的圖像滑塊：jQuery的淡入/淡出循環

$(".grid-item").mouseover(function() { 
    $(this).find(".slide-image").each(function(index) { 
     $(this).delay(800*index).fadeIn(0); 
    }); 
}).mouseleave(function() { 
    console.log("Mouse Out!"); 
});

如果函數播放一次，它停止。有沒有辦法循環功能？ Check out my CodePen！（「幻燈片圖像」）：

來源

2016-12-05 Marcus Bauer

我認爲這個問題是所有的幻燈片仍然可見一旦該功能已運行一次。如果他們沒有被隱藏，你必須在他們被顯示後再次隱藏幻燈片，然後他們不能被顯示。 – Sam

聽起來很合邏輯！你能編輯我的CodePen嗎？ –

嘗試在你的鼠標離開函數添加此

$（本）。兒童淡出（）;

來源

2016-12-05 16:02:15

您嘗試的方法具有在用戶將鼠標移動到圖像上時排隊所有轉換的缺點，但您在離開時無法取消那些排隊的轉換。他們也只會循環一次（我猜你會希望它無限期地繼續下去）。多次觸發鼠標移動也會以奇怪的效果結束。

我想你應該使用的setInterval和CSS轉換來代替，而像這樣：http://codepen.io/xram/pen/JbLNNL

var gridItemSelector = '.grid-item', 
    slideImageSelector = gridItemSelector + ' .slide-image', 
    timerId, 
    visibleCssClass = 'visible'; 

$(gridItemSelector).on('mouseover', function() { 
    timerId = setInterval(transitionToNextImage, 2000); 
}).on('mouseleave', function() { 
    clearInterval(timerId); 
}); 

function transitionToNextImage() { 
    var $slideImages = $(slideImageSelector), 
    visibleImageIndex = $slideImages.index($(slideImageSelector).filter('.' + visibleCssClass)); 

    $slideImages.removeClass(visibleCssClass); 

    if (visibleImageIndex < $slideImages.length - 1) { 
    $slideImages.eq(visibleImageIndex + 1).addClass(visibleCssClass); 
    } else { 
    $slideImages.eq(0).addClass(visibleCssClass); 
    } 
}

來源

2016-12-05 16:27:11 xram

jQuery的淡入/淡出循環

回答

相關問題