0

一連の div を反復し、ループし、次の 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

もう 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 に答える