Question

我想用闪烁的文字表示数据正在加载。然后加载数据后隐藏它。

我也使用Flask。

我是一个JQuery新手，发现了一个闪烁文字的配方，但它有副作用，隐藏起来没有用。

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>

这不起作用还是我只是搞砸了......？还有另一个简单的解决方案吗？

TIA !! 快乐的纽约

更新：

调试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');
});

这是一个有效的例子

＆＃13;

var blink = setInterval(function() {
  $('#blink').fadeToggle();
}, 500);

$('#hide').on('click', function() {
  clearInterval(blink);
  $('#blink').hide('fast');
});

＆＃13;

<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>

＆＃13;

Answer 2

你忘记了一些引号。

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

https://jsfiddle.net/2pf8v0nc/1/

闪烁也可以隐藏的文本

2 个答案: