Bug Tracker

Ticket #3120: test-3120.html

File test-3120.html, 1.5 KB (added by dmethvin, 12 years ago)
Line 
1<!DOCTYPE html> 
2<html> 
3<head> 
4<title></title> 
5<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js" type="text/javascript"></script>
6        <script type="text/javascript">
7 
8                function addListItem(animate) {
9 
10                        var $li = $("<li></li>").text("Item " + ($("ol").children().length+1));
11 
12                        var $a = $("<a></a>").text("remove").attr("href", "#").click(function() {
13                                $(this).parent("li").slideUp(1000, function() {
14                                        $(this).remove();
15                                }); 
16                        });
17 
18                        $li.append($a); 
19                        $("#list").append($li.hide());
20                        if(animate) $li.slideDown(1000); else $li.show();
21                }
22 
23                $(document).ready(function() {
24 
25                        addListItem(false);
26                        addListItem(false);
27                        addListItem(false);
28 
29                }); 
30 
31        </script>
32</head>
33<body>
34        <h1>jQuery Slide Effect Anomaly with IE6/IE7</h1>
35        <h3>Internet Explorer 6 &amp; 7</h3>
36        <p>
37        When adding or removing an item, the slideUp and slideDown effects slide in one direction for 50% of the slide, and in the other direction for the rest.
38        Note the abruptness of the effect, especially when removing an item. The same effect can be observed with show() and hide(), but is easier to
39        demonstrate with the slide.
40        </p>
41 
42        <h3>Firefox 3, Safari 3</h3>
43        <p>
44        The slide effects behave how you'd expect them to, completing a full slide up/down in a single direction. As far as I know, this is also how
45        it works in all browsers except for IE.
46        </p>
47 
48 
49        <p><a href="#" id="additem" onclick="addListItem(true)">add</a></p>     
50 
51        <ol id="list"></ol>
52 
53 
54        <p><em>Animating speed has been set slow to demonstrate the effect.</em></p>
55 
56       
57</body>
58</html>
59