アニメーション+表示用のJquery clearInterval：なし、正常に動作していません

Question

メッセージバーが点滅し、ユーザーがメッセージバーを押すとメッセージが消えます

イベントがinit =>メッセージバーが点滅（良い）=>メッセージバーを押すと消えますが、再度アニメーションループに入ります=>もう一度押すと消えますを再度それがアニメーションのこのゾンビをクリックするだけで第三に、自分自身を復活アウト死ぬ、と戻ってくることはありません（私はそれが生活に戻ってくるかどうかを確認するために良い数秒のように待っていた。）

これはどんな種類の魔術師ですか？あなたは、いくつかの間隔onclickイベント内部を設定

var timer; 

$("a[href='#top']").click(function() { 
    $("html, body").animate({scrollTop: 0}, "slow"); 
    $(".messages").css('display', 'block').append(
     "<p style='left: 150px;color: red; font-size: 24px;'>You are now on top</p>" 
); 
    $('.messages').click(function(){ 
    clearInterval(timer); 
    $(this).css('display', 'none'); 

    }); 
    function blinker(){ 
    $(".messages").fadeOut(1200); 
    $(".messages").fadeIn(1200); 
    } 
    timer = setInterval(blinker, 1000); 

Answer 1

：

は、ここに私のJavascriptを/ jQueryのです。その機能から移動してください。我々は正しいコードを配置した後それでも、あなたはまだあなたが設定した間隔の問題を持って、内部のコメントを見てください。

var timer; 
var messages = $('.messages'); 
messages.click(function() { 
    clearInterval(timer); 
    $(this).hide(); 
}); 
$("a[href='#top']").click(function() { 
    $("html, body").animate({ 
     scrollTop: 0 
    }, "slow"); 
    messages.html(
     "<p style='left: 150px;color: red; font-size: 24px;'>You are now on top</p>" 
    ).show(); 
    function blinker() { 
     messages.fadeOut(1200, function() { 
      /* This happens 1200ms after fadeOut() started, no matter if timer is on or off: */ 
      messages.fadeIn(1200); 
     }); 
    }; 
    timer = setInterval(blinker, 1000); 
    /* If you click the message in first second, than everything works as you expected */ 
}); 

より良いアプローチは、フェージングのためのCSSクラスを使用することです：

var messages = $('.messages'); 
 
messages.click(function() { 
 
    messages 
 
    \t .hide() 
 
     .removeClass('loop_fade'); 
 
}); 
 
$("a[href='#top']").click(function() { 
 
    $("html, body").animate({ 
 
     scrollTop: 0 
 
    }, "slow"); 
 
    messages 
 
    \t .addClass('loop_fade') 
 
     .html(
 
      "<p style='left: 150px;color: red; font-size: 24px;'>You are now on top</p>" 
 
     ).show(); 
 
});

.loop_fade { 
 
    background: yellow; 
 
    -webkit-animation: fadeinout 2.4s linear infinite; 
 
    animation: fadeinout 2.4s linear infinite; 
 
} 
 
@-webkit-keyframes fadeinout { 
 
    0% { 
 
     opacity: 1; 
 
    } 
 
    50% { 
 
     opacity: 0; 
 
    } 
 
    100% { 
 
     opacity: 1; 
 
    } 
 
} 
 
@keyframes fadeinout { 
 
    0% { 
 
     opacity: 1; 
 
    } 
 
    50% { 
 
     opacity: 0; 
 
    } 
 
    100% { 
 
     opacity: 1; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="top"> 
 
    <div class="messages"></div> 
 
</div> 
 
<a href="#top">Go top</a>

JSFiddle Playground。

EDIT：あなたはJSソリューションをしたい場合は

が、これは動作しますより：JSFiddleにも

var timer; 
 
var messages = $('.messages'); 
 
messages.click(function() { 
 
    messages.stop(); 
 
    clearInterval(timer); 
 
    $(this).hide(); 
 
}); 
 
function blinker() { 
 
    messages.fadeToggle(1200); 
 
}; 
 
$("a[href='#top']").click(function() { 
 
    $("html, body").animate({ 
 
     scrollTop: 0 
 
    }, "slow"); 
 
    messages.html(
 
     "<p style='left: 150px;color: red; font-size: 24px;'>You are now on top</p>" 
 
    ).show(); 
 
    timer = setInterval(blinker, 1201); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="top"> 
 
    <div class="messages"></div> 
 
</div> 
 
<a href="#top">Go top</a>

。