Time for action – making an element disappear in a puff

In this example, we'll have a dialog box displayed in the center of the browser window and apply the puff effect to it when either the Ok or Cancel buttons are clicked.

  1. In the <body> of our template file, add the following elements for the dialog:
    <div id="confirm">
  <img src="img/help.png" alt="Help Icon">
    <p>Are you sure you want to do that?</p>
  <button>Ok</button><button>Cancel</button>
</div>
  2. Add the accompanying script to the empty function as follows:
    $("#confirm").css({
  left: $(window).width() / 2 - $("#confirm").width() / 2, 
  top: $(window).height() / 2 - $("#confirm").height() / 2
});

$("#confirm, button").click(function() {
  $("#confirm").effect("puff");
});
  3. Save this page as puff.html ...

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