diff --git a/demos/popup/animation.html b/demos/popup/animation.html
new file mode 100644
index 0000000000..3d5f505839
--- /dev/null
+++ b/demos/popup/animation.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>jQuery UI Popup - Animation demo</title>
+	<link rel="stylesheet" href="../demos.css" />
+	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css" title="ui-theme" />
+	<script src="../../jquery-1.6.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.position.js"></script>
+	<script src="../../ui/jquery.ui.button.js"></script>
+	<script src="../../ui/jquery.ui.menu.js"></script>
+	<script src="../../ui/jquery.effects.core.js"></script>
+	<script src="../../ui/jquery.effects.blind.js"></script>
+	<script src="../../ui/jquery.effects.scale.js"></script>
+	<script src="../../ui/jquery.ui.popup.js"></script>
+	<script>
+	$(function() {
+		var selected = {
+			select: function( event, ui ) {
+				$( "<div/>" ).text( "Selected: " + ui.item.text() ).appendTo( "#log" );
+				$(this).popup("close");
+			}
+		};
+
+		$("#login-form").popup({
+			show: {
+				effect: "blind",
+				direction: "up",
+				mode: "show",
+				duration: "fast"
+			},
+			hide: {
+				effect: "scale",
+				percent: 0,
+				duration: "fast"
+			}
+		})
+		.find(":submit").button().click(function(event) {
+			event.preventDefault();
+		});
+	});
+	</script>
+	<style type="text/css">
+		.ui-popup { position: absolute; z-index: 5000; }
+		.ui-menu { width: 200px; }
+
+		/*
+		table {
+			border-collapse: collapse;
+		}
+		th, td {
+			padding: 0.5em;
+			border: 1px solid black;
+		}
+		*/
+
+		#login-form {
+			width: 16em; border: 1px solid gray; border-radius: 5px;
+			padding: 1em;
+			box-shadow: 3px 3px 5px -1px rgba(0, 0, 0, 0.5);
+			background: lightgray; background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ddd));
+			font-size: 1.3em; outline: none;
+		}
+		#login-form label { display: inline-block; width: 5em; }
+		#login-form .submit { margin-left: 5em; }
+ 	</style>
+</head>
+<body>
+
+<div class="demo">
+	<a href="#login-form">Log In</a>
+	<div class="ui-widget-content" id="login-form" aria-label="Login options">
+		<div>
+			<label for="un">Username</label>
+			<input type="text" id="un" />
+		</div>
+		<div>
+			<label for="pw">Password</label>
+			<input type="password" id="pw" />
+		</div>
+		<div>
+			<input type="submit" value="Login" class="submit" />
+		</div>
+	</div>
+</div>
+
+<div class="demo-description">
+
+<p>A link to a login form that opens as a popup. Open and close animations have been used.</p>
+
+</div><!-- End demo-description -->
+
+
+</body>
+</html>
diff --git a/demos/popup/index.html b/demos/popup/index.html
index e69365c986..9615852680 100644
--- a/demos/popup/index.html
+++ b/demos/popup/index.html
@@ -10,6 +10,7 @@
 		<h4>Examples</h4>
 		<ul>
 			<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
+			<li><a href="animation.html">Popup - show/hide effects</a></li>
 			<li><a href="popup-menu.html">Menu's as popup</a></li>
 			<li><a href="popup-menu-table.html">Menu's as popup in a table</a></li>
 		</ul>
diff --git a/ui/jquery.ui.popup.js b/ui/jquery.ui.popup.js
index 15349bc233..487a53eead 100644
--- a/ui/jquery.ui.popup.js
+++ b/ui/jquery.ui.popup.js
@@ -22,7 +22,9 @@ $.widget( "ui.popup", {
 		position: {
 			my: "left top",
 			at: "left bottom"
-		}
+		},
+		show: "slideDown",
+		hide: "fadeOut"
 	},
 	_create: function() {
 		if ( !this.options.trigger ) {
@@ -45,8 +47,9 @@ $.widget( "ui.popup", {
 			.attr( "aria-owns", this.element.attr( "id" ) );
 
 		this.element
-			.addClass( "ui-popup" );
-		this.close();
+			.addClass( "ui-popup" )
+		this._beforeClose();
+		this.element.hide();
 
 		this._bind(this.options.trigger, {
 			keydown: function( event ) {
@@ -159,8 +162,8 @@ $.widget( "ui.popup", {
 			of: this.options.trigger
 		}, this.options.position );
 
+		this._show( this.element, this.options.show );
 		this.element
-			.show()
 			.attr( "aria-hidden", "false" )
 			.attr( "aria-expanded", "true" )
 			.position( position );
@@ -190,10 +193,8 @@ $.widget( "ui.popup", {
 	},
 
 	close: function( event ) {
-		this.element
-			.hide()
-			.attr( "aria-hidden", "true" )
-			.attr( "aria-expanded", "false" );
+		this._beforeClose();
+		this._hide( this.element, this.options.hide );
 
 		this.options.trigger.attr( "tabindex" , 0 );
 		if ( this.removeTabIndex ) {
@@ -201,6 +202,12 @@ $.widget( "ui.popup", {
 		}
 		this.isOpen = false;
 		this._trigger( "close", event );
+	},
+	
+	_beforeClose: function() {
+		this.element
+			.attr( "aria-hidden", "true" )
+			.attr( "aria-expanded", "false" );
 	}
 });
 
