Bug Tracker

Ticket #2408: bug-2408.html
File bug-2408.html, 1.4 KB (added by Kanuck, February 19, 2010 07:34AM UTC)

Simple example of this bug in action.

<!DOCTYPE html>
<html>
<head>
<title>jQuery bug 2408 in action</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js?ver=1.4.2"></script>
<script>
jQuery(function($) {
	$("#fade").hover(function() {
		$(this).find("div").stop().animate({
			'opacity' : 1,
			'height' : 150
		}, 1000);
	}, function() {
		$(this).find("div").stop().animate({
			'opacity' : 0,
			'height' : 0
		}, 1000);
	});
	$("#slidefade").hover(function() {
		$(this).find("div").stop().animate({
			'opacity' : 'toggle',
			'height' : 'toggle'
		}, 1000);
	});
});
</script>
<style>
div#fade {
	position: relative;
	width: 400px; height: 300px;
	color: white; background-color: green;
	font-weight: bold;
}
div#slidefade {
	position: relative;
	width: 400px; height: 300px;
	color: white; background-color: red;
	font-weight: bold;
}
div div {
	position: absolute;
	bottom: 50px; left: 50px;
	width: 300px; height: 150px;
	color: black; background-color: white;
	font-weight: bold;
	display: none;
}
</style>
</head>

<body>
	
	<h1>jQuery bug 2408 in action</h1>
	
	<p>Hover to trigger an animation; while it is playing, hover out, and back in.</p>
	
	<div id="fade">
		<p>Working demonstration</p>
		<div style="height: 0; opacity: 0;">I work correctly because I use explicit values.</div>
	</div>
	
	<div id="slidefade">
		<p>Broken demonstration</p>
		<div>I am very broken</div>
	</div>
	
</body>

</html>

Download in other formats:

Original Format