使用fadeIn循环执行jQuery函数

Question

我正在使用一个简单的jQuery函数创建一个小型图片轮播器：

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

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

如果函数只执行一次，那么有没有循环函数的方法？请查看我的CodePen！

- Jonas

---

使用 mouseenter 和 mouseleave 事件？ - philantrovert

请查看此答案：https://dev59.com/wYHba4cB1Zd3GeqPTZgb，其中分享了这个很棒的链接：http://css3.bradshawenterprises.com/cfimg/#cf4a - onzinsky

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

尝试这个，但要更好地把握时间。

- AthMav

---

尝试增加延迟... delay(2000*index) - AthMav

在淡出的函数中，你应该让它们以相反的顺序淡出...大概就是这样。另外，你可能会遇到鼠标悬停的问题... - AthMav

Answer 2

根据这个例子，我为您准备了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 获取完整代码。

希望对您有所帮助。

- onzinsky

---

运行正常！谢谢！ - Jonas