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的淡入/淡出循环

回答

相关问题