Time for action – using the effect

The social networking site Twitter introduced a novel effect whereby the system reports actions to the visitor by displaying a message that drops down at the top of the page. We can easily replicate this behavior using the drop effect.

  1. Add the following markup to the <body> of our template page:
    <div id="confirmation">
  <p>Your request has been completed!</p>
</div>
  2. Now at the bottom of the page add the following code:
    $("#confirmation").effect("drop", { 
  mode: "show",
  direction: "up"
}, function() {
  var timer = function() {
    $("#confirmation").effect("drop", { mode: "hide", direction: "up"});
  }

  setTimeout(function() { timer() }, 3000);
});
  3. Save the page as drop.html. We only need a few styles for this example. Create ...

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