Ticket #4228: jquery_margin_auto_effect.html

File jquery_margin_auto_effect.html, 1.2 KB (added by ChronoworX, 13 years ago)

Test case

Line 
1<!doctype html>
2<html lang="en">
3<head>
4        <title>jQuery UI Effects - Bounce Demo</title>
5        <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
6        <script type="text/javascript" src="http://jqueryui.com/demos/effects_general/../../ui/effects.core.js"></script>
7        <script type="text/javascript" src="http://jqueryui.com/demos/effects_general/../../ui/effects.shake.js"></script>
8        <style type="text/css">
9                #bounce { width: 240px; height: 135px; padding: 0.4em; margin: 50px auto; border: 2px solid black; cursor: pointer;}
10                #bounce h3 { margin: 0; padding: 0.4em; text-align: center; }
11        </style>
12        <script type="text/javascript">
13        $(function() {
14                $("#bounce").click(function() {
15                        $(this).effect("shake");
16                });
17        });
18        </script>
19</head>
20<body>
21
22<div class="demo">
23
24<div id="bounce">
25        <h3 class="ui-widget-header ui-corner-all">Bounce</h3>
26        <p>
27                Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
28        </p>
29</div>
30
31</div><!-- End demo -->
32
33<div class="demo-description">
34
35<p>
36Click above to preview the <code>.effect("bounce")</code> effect.
37</p>
38
39</div><!-- End demo-description -->
40
41</body>
42</html>