Bug Tracker

Ticket #3323: jqueryShowHideSample.htm

File jqueryShowHideSample.htm, 1.1 KB (added by sss8969, 13 years ago)

Sample html showing the font change behavior. Notice as each word is hidden, that the font changes to a less bold, less smooth version. When the text is redisplayed, it stays that way.

Line 
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2                    "http://www.w3.org/TR/html4/loose.dtd">
3<html>
4<head>
5        <script src="http://code.jquery.com/jquery-latest.js"></script>
6       
7        <script>
8        $(document).ready(function(){
9               
10                $("#btnHide").click(function () {
11                        $("span:last-child").hide("fast", function () {
12                                // use callee so don't have to name the function
13                                $(this).prev().hide("slow", arguments.callee); 
14                        });
15                });
16                $("#btnShow").click(function () {
17                        //$("span").show(2000);
18                        $("span").show("slow");
19                });
20        });
21        </script>
22        <style>
23        span {
24                background:#def3ca; 
25                padding:3px; 
26                float:left;
27                font-family: Arial, sans-serif;
28                font-weight:bold;
29                /*font-size:8pt;*/
30                font-size:10px;
31        }
32        </style>
33</head>
34<body>
35  <button id="btnHide">Hide</button>
36  <button id="btnShow">Show</button>
37  <div>
38    <span>Tis</span> 
39    <span>is</span> 
40    <span>a</span> 
41    <span>test</span> 
42    <span>of</span> 
43    <span>the</span> 
44    <span>jquery</span> 
45    <span>.hide/.show</span> 
46    <span>functionality</span> 
47    <span>...</span> 
48  </div>
49</body>
50</html>