Bug Tracker

Ticket #2408: bug-2408.html

File bug-2408.html, 1.4 KB (added by Kanuck, 10 years ago)

Simple example of this bug in action.

Line 
1<!DOCTYPE html>
2<html>
3<head>
4<title>jQuery bug 2408 in action</title>
5<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js?ver=1.4.2"></script>
6<script>
7jQuery(function($) {
8        $("#fade").hover(function() {
9                $(this).find("div").stop().animate({
10                        'opacity' : 1,
11                        'height' : 150
12                }, 1000);
13        }, function() {
14                $(this).find("div").stop().animate({
15                        'opacity' : 0,
16                        'height' : 0
17                }, 1000);
18        });
19        $("#slidefade").hover(function() {
20                $(this).find("div").stop().animate({
21                        'opacity' : 'toggle',
22                        'height' : 'toggle'
23                }, 1000);
24        });
25});
26</script>
27<style>
28div#fade {
29        position: relative;
30        width: 400px; height: 300px;
31        color: white; background-color: green;
32        font-weight: bold;
33}
34div#slidefade {
35        position: relative;
36        width: 400px; height: 300px;
37        color: white; background-color: red;
38        font-weight: bold;
39}
40div div {
41        position: absolute;
42        bottom: 50px; left: 50px;
43        width: 300px; height: 150px;
44        color: black; background-color: white;
45        font-weight: bold;
46        display: none;
47}
48</style>
49</head>
50
51<body>
52       
53        <h1>jQuery bug 2408 in action</h1>
54       
55        <p>Hover to trigger an animation; while it is playing, hover out, and back in.</p>
56       
57        <div id="fade">
58                <p>Working demonstration</p>
59                <div style="height: 0; opacity: 0;">I work correctly because I use explicit values.</div>
60        </div>
61       
62        <div id="slidefade">
63                <p>Broken demonstration</p>
64                <div>I am very broken</div>
65        </div>
66       
67</body>
68
69</html>