0

ユーザーが最初にボタンをクリックするとき、ループアニメーション化される前にdivに3秒のタイムアウトを設定したいと思います。

その後、ユーザーがその3秒間にもう一度クリックした場合、タイムアウトをクリアしてアニメーションを停止したいと思います。

これまでのところ、タイムアウトを正常に機能させることはできますが、タイムアウトをクリアしてアニメーションを停止させることはできません。

HTML：

<a href="#" class="button">Button</a>
<div class="block"></div>

CSS：

div.block {
  position: absolute;
  display: block;
  height: 100px;
  width: 100px;
  top: -10px;
  left: 50%;
  background-color: red; }

jQuery：

$('a.button').toggle(function(){
    var blockTimer;
    blockTimer = setTimeout(function block(){
      $("div.block").animate({top: '400px'}, 4000, 'linear', function() { $(this).css('top', '-10px'); block(); });
        },3000);
}, function(){
clearTimeout(rainTimer);
    $('div.block').clearQueue().stop().fadeOut(500, function() { $(this).css('top', '-10px').show(); });
});
4

1 に答える 1

2

後でクリアできるように、関数のスコープ外で変数を定義する必要があります。また、あなたはクリアrainTimerしていますが、それをとして定義していますblockTimer。

var blockTimer;

$('a.button').toggle(function(){
    blockTimer = setTimeout(function block() {
        $("div.block").animate({top: '400px'}, 4000, 'linear', function() { $(this).css('top', '-10px'); block(); });
        }, 3000);
}, function() {
    clearTimeout(blockTimer);
    $('div.block').clearQueue().stop().fadeOut(500, function() { $(this).css('top', '-10px').show(); });
});
于 2012-11-17T12:47:34.363 に答える