试图用jQuery停止超时功能

时间:2012-11-29 13:03:11

标签: jquery animation jquery-selectors

我有一组绝对定位的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元素中的每组图像上设置此循环,如何通过单击暂停该动画然后重新启动?

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

1 个答案:

答案 0 :(得分: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;
    }
}