I've prepared a little code snipped which works quite perfectly - except that I'd like to eliminate the pa开发者_如何学JAVAuse when setting the text to an empty string (between "hello world" and "hello universe").
Can anyone figure out how? Must admit - I didn't... :-(
Sandbox is here
<!-- Put the notificationBar somewhere in your HTML -->
<div id="notificationBar"></div>
/* whatever you want it to look like - keep the display: none; */
#notificationBar {
display: none;
padding: 1em;
border-radius: 5px;
background-color: red;
color: white;
}
The jQuery
// Set it up!
var notificationTextToggeled = 0; // Always 0
var notificationDelay = 2000; // Whatever delay you want, in ms (1000 = 1 sec)
// Here goes your code... intersperse it with notification messages you
// want to present to the user... just like below
notificationToggle ('Hello World');
notificationToggle ('');
notificationToggle ('Hello Universe');
notificationToggle ('Hello Superman');
notificationToggle ('');
// This function will do all the displaying and will keep an eye
// on not waving too many messages to the user in too short time:
// Each (not empty) message text will be displayed for at least the delay time
function notificationToggle (text) {
var know = $.now();
if (text != $('#notificationBar').html().length && know < (notificationTextToggeled + notificationDelay ))
$('#notificationBar').delay(notificationDelay, "fx");
$('#notificationBar').text().length
$('#notificationBar').slideUp('slow');
$.queue($("#notificationBar")[0], "fx", function () {
$(this).html(text);
$.dequeue(this);
});
if (text)
$('#notificationBar').slideDown('slow');
notificationTextToggeled = know;
}
There is no need to set the text string to empty, hello universe just replaces it all together. The pause is caused by an entire rotation of ''
http://jsfiddle.net/DRLgE/11/
精彩评论