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元素并寻找它的下一个兄弟，知道接下来要显示哪一个。如果它不存在，则表示当前活动是最后一个，因此他再次获取第一个。简单。

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

var milisecs = 1000;
var myInterval;

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

查看整个事情的jsFiddle。

希望它有所帮助。

用fadeIn循环jQuery函数

2 个答案: