Blinking Text that Can Also Be Hidden

Question

I would like to use blinking text to signify that data is loading. Then hide it once the data is loaded.

I'm also using Flask.

I'm a JQuery newbie and found a recipe for flashing text, but it has the side effect, that hide didn't work.

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

The I tried to hide after loading data into a div.

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

HTML:

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

Does this not work or am I just screwing it up...? Is there another simple solution ?

TIA !! Happy NY's

UPDATE:

Debugging Andrew Brooke's answer customized for a callback on load.

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

Believe it or not, there is an HTML tag called that was deprecated about 15 years ago, but it still works in some browsers. I'm kidding, please don't actually use that, but its a fun fact. still works on some as well. — Lawrence Johnson, Dec 31 '15 at 23:53

Andrew Brooke · Accepted Answer · 2015-12-31T22:18:41.160

2

Assign your interval to a variable, then clear it in the .load callback with clearInterval. Then you can hide the blinking text with .hide

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

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

Here's a working example

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>

edited Dec 31 '15 at 22:18

answered Dec 31 '15 at 21:57

Andrew Brooke

12,073
8
39
55

having difficulty with syntax for load callback. – wbg Dec 31 '15 at 22:17
You'll have to be more specific. I did miss a semicolon in my code though, so check that – Andrew Brooke Dec 31 '15 at 22:18
thanks again ! This learning project has been intense and not possible without people like yourself....cheers – wbg Dec 31 '15 at 22:34

score 0 · Answer 2 · answered Dec 31 '15 at 21:57

0

You forgot some quotation marks.

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

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

answered Dec 31 '15 at 21:57

GAntoine

1,265
2
16
28

1

I'm pretty sure he made a typo, this doesn't seem to work – Andrew Brooke Dec 31 '15 at 22:01
Are you saying my JSFiddle doesn't work? Cause it's not suppose to load anything. Which I guess makes it kinda pointless... – GAntoine Dec 31 '15 at 22:09
You're right about the quotation marks, but that doesn't solve the problem. Take a look at [this fiddle](https://jsfiddle.net/7beoqL19/). Hiding it doesn't keep the element hidden, because the interval is still repeating – Andrew Brooke Dec 31 '15 at 22:14

Blinking Text that Can Also Be Hidden

2 Answers2