Bug Tracker

Ticket #6309: animatebug.html

File animatebug.html, 2.1 KB (added by Screeze, 12 years ago)

Example code

Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3   <head>
4      <title>Client validator test page</title>
5      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
7   </head>
8   <body>
9   <div id="notworking" style="border: 1px solid red;">
10   This one is not working.
11   </div>
12   <br>
13   <div id="working" style="border: 1px solid black;">
14   This one is working.
15   </div>
16   
17   <input type="button" id="buttonNotWorking" value="try not working example (watch firebug console!!)">
18   <input type="button" id="buttonWorking" value="try working example">
19      <script type="text/javascript">
20      $(document).ready(function(){
21        $("#notworking").data("animationproperties", { opacity: 0.25, left: '+=50', height: 'toggle' });
22        $("#notworking").data("animationoptions", {'duration':150});
23        $("#working").data("animationproperties", { opacity: 0.25, left: '+=50', height: 'toggle' });
24        $("#working").data("animationoptions", {'duration':150});
25       
26        $("#buttonNotWorking").bind('click', function(){
27            var divNotWorking = $("#notworking");
28           
29            var anprop = divNotWorking.data("animationproperties");
30            var anopt = divNotWorking.data("animationoptions");
31           
32            divNotWorking.animate(anprop, anopt);
33        });
34        $("#buttonWorking").click(function(){
35            var divWorking = $("#working");
36           
37            var anprop = divWorking.data("animationproperties");
38            var anopt = divWorking.data("animationoptions");
39            // clone the objects
40            var anpropClone = jQuery.extend(true, {}, anprop);
41            var anoptClone = jQuery.extend(true, {}, anopt);
42       
43            divWorking.animate(anpropClone, anoptClone);
44        });
45       
46      });
47     
48     
49      </script>
50     
51   </body>
52</html>