0

我创建了一个函数，它遍历一组 div、循环、淡入和淡出下一个。

我想要做的是在“点击”、if/else 或焦点时停止它。在进行一些搜索时，我似乎可以利用setTimeout-clearTimeout功能。但是我有点不清楚如何去做，也许实施不正确。

摆弄我这个蝙蝠侠

HTML：

<a href="#" class="killFunc">Kill Loop Function</a>
<div id="productBox">
    <h3>Dynamic Title Here</h3>

    <div class="divProduct">
        <!-- product image -->
        <div class="product-discription">
            <h4>Product 1</h4>
            <p>Cras justo odio, dapibus ac facilisis in.</p>
            <a href="#">Learn More</a>
        </div>
    </div>

    <!-- Repeat '.divProduct' over and over -->

</div>

JS：

timer = null;

function productTypeCycle(element) {

    timer = setTimeout(function() {

        element.fadeIn()
               .delay(1000)
               .fadeOut(function() {
                   if(element.next().length > 0) {
                       productTypeCycle(element.next());
                   }
                   else {
                       productTypeCycle(element.siblings(":nth-child(2)"));
                   }
              });
   }, 500);
}

$(document).ready(function() {
    productTypeCycle($(".divProduct:first"));
    $(".killFunc").click(function(e) {
        e.preventDefault();
        if(timer !== null) {
            clearTimeout(timer);
        }
    });
});

当然，像往常一样，我可能想得太简单了。

4

3 回答 3

1

这里的问题是你正确地停止了你的定时器，但遗憾的是你的定时器通过 jQuery 在内部为动画启动了另一个“定时器”。您需要停止动画而不是计时器：

var animationEle = null;
function productTypeCycle(element) {
  animationEle = element;
  element.fadeIn()
    .delay(1000)
    .fadeOut(function () {
    if (element.next().length > 0) {
      productTypeCycle(element.next());
    } else {
      productTypeCycle(element.siblings(":nth-child(2)"));
    }
  });
}

$(document).ready(function () {
  productTypeCycle($(".divProduct:first"));
  $(".killFunc").click(function (e) {
    e.preventDefault();
    if (animationEle)
      $(animationEle).stop(true, false);
  });
});

工作小提琴

于 2013-06-05T13:21:10.160 回答
1

另一种（更干净）的方法是让最后一个动画完成，但设置一个值来停止任何进一步的动画。

http://jsfiddle.net/hhwfq/54/

像这样。

timer = null;
var animationCancelled = false;
function productTypeCycle(element) {

    timer = setTimeout(function() {        
        element.fadeIn()
               .delay(1000)
               .fadeOut(function() {
                   if(animationCancelled) return;
                   if(element.next().length > 0 ) {
                       productTypeCycle(element.next());
                   }
                   else {
                       productTypeCycle(element.siblings(":nth-child(2)"));
                   }
              });
   }, 500);
}

$(document).ready(function() {
    productTypeCycle($(".divProduct:first"));
    $(".killFunc").click(function(e) {
        e.preventDefault();
        if(timer !== null) {
            clearTimeout(timer);            
            animationCancelled = true;
        }
    });
});
于 2013-06-05T13:27:09.713 回答
0

问题是淡入淡出，而不是计时器。淡入淡出仍在执行。您需要运行 $(element).stop(); 在所有已开始动画的元素上，否则它们将继续。

于 2013-06-05T13:12:58.570 回答