Bug Tracker

Ticket #6496: test.html

File test.html, 2.1 KB (added by rasamassen, 10 years ago)

fadeIn test case

Line 
1<!DOCTYPE html>
2
3<html lang="en-US" dir="ltr">
4<head>
5        <title>FadeIn Bug</title>
6        <meta name="language" content="en-US" />
7        <meta charset="UTF-8">
8
9        <style>
10        .foobar, .foobar2 { position:relative; }
11        .sub { position:absolute;left:50px;top:50px;width:50px;height:50px;display:none; }
12        .foo1 .sub { background:blue; }
13        .foo2 .sub { background:red; }
14        .foo3 .sub { background:green; }
15        </style>
16       
17        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
18        <script type="text/javascript">
19        $(document).ready(function(){
20                $('.foobar').hover(function()
21                {
22                        $(this).find('.sub').dequeue().stop();
23                        $(this).find('.sub').delay(600).fadeIn('400');
24                }, function() {
25                        $(this).find('.sub').dequeue().stop();
26                        $(this).find('.sub').delay(600).fadeOut('400');
27                });
28
29                $('.foobar2').hover(function()
30                {
31                        $(this).find('.sub').dequeue().stop();
32                        $(this).find('.sub').delay(600).fadeTo('400',1);
33                }, function() {
34                        $(this).find('.sub').dequeue().stop();
35                        $(this).find('.sub').delay(600).fadeOut('400');
36                });
37        });
38        </script>
39</head>
40
41<body>
42        <p>This example uses <strong>fadeIn</strong> and fadeOut. Mouseover all three rapidly and soon the boxes will no longer appear! FireBug shows opacities are remaining set.</p>
43       
44        <ul>
45                <li class="foobar foo1"><a href="/">Mouseover me to show a blue box!</a>
46                        <span class="sub">What?</span>
47                </li>
48                <li class="foobar foo2"><a href="/">Mouseover me to show a red box!</a>
49                        <span class="sub">What?</span>
50                </li>
51                <li class="foobar foo3"><a href="/">Mouseover me to show a green box!</a>
52                        <span class="sub">What?</span>
53                </li>
54        </ul>
55       
56        <p>This example uses <strong>fadeTo</strong> and fadeOut</p>
57        <ul>
58                <li class="foobar2 foo1"><a href="/">Mouseover me to show a blue box!</a>
59                        <span class="sub">What?</span>
60                </li>
61                <li class="foobar2 foo2"><a href="/">Mouseover me to show a red box!</a>
62                        <span class="sub">What?</span>
63                </li>
64                <li class="foobar2 foo3"><a href="/">Mouseover me to show a green box!</a>
65                        <span class="sub">What?</span>
66                </li>
67        </ul>
68       
69</body>
70</html>