Question

我有一个闪烁的消息栏，它会在一个简单的事件上闪烁，当用户按下消息栏时，消息将消失（我需要显示无此消息）。

所以当事件是init =＆gt;消息栏闪烁（好）=＆gt;按下消息栏使其消失，但然后再次进入间隔动画循环=＆gt;再次按它，消失但再次它恢复自己，只有在第三次点击这个动画的僵尸消失，永远不会回来（我等了好几秒钟，看看它是否回来生活。）

这是什么样的巫术？

这是我的Javascript / Jquery：

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

您在onclick事件中设置了几个区间。将其移出该功能。但是，在我们放置正确的代码后，您仍然会遇到设置间隔的问题，请查看内部的评论：

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
    	.hide()
        .removeClass('loop_fade');
});
$("a[href='#top']").click(function() {
    $("html, body").animate({
        scrollTop: 0
    }, "slow");
    messages
    	.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

修改

如果你想要一个JS解决方案，那么这将起作用：

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>

同样在JSFiddle。

Jquery clearInterval用于动画+显示：无，不能正常工作

1 个答案: