Time for action – replacing the queue

  1. We'll update the queue.html file once again for this example. We'll need another style rule in the <style> element in the <head> of the page:
    #fader span {
  display:none; width:100%; height:100%; position:absolute; left:0;
  top:0;
}
  2. We should also add position:relative; to the #fader selector.
  3. Now change the script at the bottom of the page to this:
    <script> (function($){ function changeColor(element, newColor) { $("<span>").css("backgroundColor", newColor).appendTo(element).fadeIn(500, function(){ element.dequeue(); }); } var fader = $("#fader"); var newQ = [ function() { changeColor(fader, "yellow") }, function() { changeColor(fader, "orange") }, function() { changeColor(fader, "green") }, function() { changeColor(fader, ...

Get jQuery 1.4 Animation Techniques Beginner's Guide now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial