javascript - 也可以隐藏的闪烁文本

Question

我想使用闪烁的文本来表示数据正在加载。然后加载数据后将其隐藏。

我也在使用 Flask。

我是一个 JQuery 新手，发现了一个闪烁文本的方法，但它有副作用，即隐藏不起作用。

SO answer

setInterval(function() {
    $( "#blink" ).fadeToggle();
}, 500);

将数据加载到 div 后我试图隐藏。

$("#data").load("/load_data/", function() {
    $("#blink").hide('fast')
});

HTML:

<p id="blink">Loading Data</p>
<div id="data"></div>

这不起作用还是我把它搞砸了......？还有其他简单的解决方案吗？

蒂亚!!纽约快乐

更新:

调试 Andrew Brooke 为加载回调定制的答案。

$("#data").load("/load_data/", function() {
    $.clearInterval(blink);
    $("#blink).hide("fast")
});

Answer 1

将间隔分配给变量，然后在 .load 回调中使用 clearInterval 清除它。然后你可以用 .hide

隐藏闪烁的文本

var blink = setInterval(function() {
  $('#blink').fadeToggle();
}, 500);

$('#data').load('/load_data/', function() {
  clearInterval(blink);
  $('#blink').hide('fast');
});

这是一个工作示例

var blink = setInterval(function() {
  $('#blink').fadeToggle();
}, 500);

$('#hide').on('click', function() {
  clearInterval(blink);
  $('#blink').hide('fast');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" value="Hide" id="hide">
<p id="blink">
  This is blinking
</p>