Question

我有一组绝对定位的div，它们是图像的容器。每个div都有一个photoCover类，每个img都有一个fbPhoto类。我已经设置了一个循环函数，在页面加载时淡化集合中的每个图像，从而显示下面的图像然后循环。

我需要的是能够在用户点击其中任何一个时停止此操作。

我尝试了各种涉及$(this).stop(true, true)的选项和几个关于SO的例子，但似乎没有任何效果。

这是循环函数的代码

var thumbNailTimeOut;
function loopSmallSlides(eleArray) {
    var slideCount = eleArray.length;
    $(eleArray).each(function (indexInArray) {
        var ele = this;
        thumbNailTimeOut = setTimeout(function () {
            if (indexInArray == slideCount - 1) {
                $(eleArray).fadeIn('slow').on("click", function () {
                    clearTimeout(thumbNailTimeOut);
                }); 
                clearTimeout(thumbNailTimeOut);
                loopSmallSlides(eleArray); // loop the function when the end is reached
            } else {
                $(ele).fadeToggle('slow').on("click", function () {
                    clearTimeout(thumbNailTimeOut);
                }); 
            };
        }, (indexInArray + 1) * 1000);
    });
};

循环函数接受document.ready上生成的元素数组，如下所示：

$(document).ready(function () {
    $('.photoCover').each(function () {
        // get an array of elements to slide
        var eleArray = $(this).children('.fbPhoto').get().reverse();
        loopSmallSlides(eleArray);
    });
});

摘录

$(ele).fadeToggle('slow').on("click", function () {
    clearTimeout(thumbNailTimeOut);
});

正在尝试向数组中的每个元素添加一个单击处理程序，以便在单击任何这些元素时清除超时，但它不起作用。正如您所看到的，变量thumbNailTimeOut是一个全局可用的变量...据我所知，应该取消timeOut？

如上所述，我尝试使用stop但无法到达任何地方，我尝试在父元素中添加click，然后循环删除任何动画，如下所示，但这并不是工作。

$('.photoCover').each(function () {
     $(this).children('.fbPhoto').stop(true, true);
});

如果需要，HTML如下所示：

<style>
   .photoCover{display:inline-block;width:204px;height:194px;vertical-align:top;}
   .fbPhoto{position:absolute;display:inline-block;width:110px;height:110px;margin:4px;background-position:center center;background-repeat:no-repeat;border-radius:5px;border:16px groove #93BABA;background-color:#93BABA;}
</style>

<div class="photoCover">
   <h4>Album Title</h4>                     
   <span style="background-image: url('IMG URL');" class="fbPhoto"></span>
   <span style="background-image: url(IMG URL); " class="fbPhoto"></span>
   <span style="background-image: url(IMG URL); " class="fbPhoto"></span>
   <span style="background-image: url(IMG URL); " class="fbPhoto"></span>
   <span style="background-image: url(IMG URL); " class="fbPhoto"></span>                        
</div>

所以我的问题是，在嵌套在父.photoCover元素中的每组图像上设置此循环，如何通过单击暂停该动画然后重新启动？

任何帮助非常感谢！关于这一点似乎存在很多其他问题，但我无法得到这个例子的工作答案！

Answer 1

在此函数中反复覆盖thumbNailTimeOut：

$(eleArray).each(function (indexInArray) { /* fn body */ });

函数完成工作后，变量中存储的唯一内容就是您设置的最后一个超时。您可以尝试将变量用作数组。例如：

thumbNailTimeOut[index] = setTimeout(function () { /* fn body */ }, delay);

清除超时将变为：

clearTimeout(thumbNailTimeOut[index]);

但说实话：我不喜欢你使用那么多超时的方法。也许使用单个区间函数会更方便。

修改
我尝试用间隔重写你的函数。我还没有尝试过，但它看起来比超时代码更清晰：

function loopSmallSlides(eleArray) { var interval , $elems = $(eleArray); , current = 0; , slideCount = eleArray.length; interval = setInterval(function(){ current = intervalFn($elems, current); }, 1000); $elems.on('click', function(e) { clearInterval(interval); }); }; function intervalFn($elems, current) { if( current < $elems.length) { $elems.eq(current).fadeIn('slow'); return current+1; } else { $elems.fadeOut('slow'); return 0; } }

试图用jQuery停止超时功能

1 个答案: