使用淡入淡出循环 jQuery 函数

Question

我正在使用一个简单的 jQuery 函数来创建一个小图像滑块：

function gridhover() {
    $(".grid-item .slide-image").each(function(index) {
        $(this).delay(400*index).fadeIn(300);
    });
}

$( ".grid-item" ).hover(function() {
    gridhover();
});

如果函数播放一次，它就会停止。有没有办法循环函数？看看我的CodePen！

Answer 1

这里的想法是，既然你淡入了某些东西，你也必须将它淡出并一次又一次地重复相同的过程

function gridhover() {
    $(".grid-item .slide-image").each(function(index) {
        $(this).delay(2000*index).fadeIn(300);
    });
  $(".grid-item .slide-image").each(function(index) {
        $(this).delay(2000*index).fadeOut(300);
    });
}

试试这个，但要更好的时机

Answer 2

基于this example我为你准备了this jsFiddle。

<div id="cycler">
    <img class="active" src="image1.jpg" alt="My image" />
    <img src="image2.jpg" alt="My image" /> 
    ...
</div>

他在示例中所做的是选择.active 元素并查找它的下一个兄弟元素以知道接下来要显示哪个元素。如果不存在，说明当前active是最后一个，所以他又取了第一个。很简单。

我把他的函数应用到.hover()。并将 myInterval 变量设置为全局变量，以便您可以从 .hover() 及其回调函数访问它。

var milisecs = 1000;
var myInterval;

$("#cycler").hover(function(){
    myInterval = setInterval(function(){cycleImages()}, milisecs);
}, function(){
    clearInterval(myInterval);
});
...

查看整个 jsFiddle。

希望对你有帮助。