Program pokazuje bardzo efektowne i proste do napisania animacje z biblioteki jQuery
index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="kontener"> <div id="naglowek">Naglowek</div> <div class="kolumna">Menu</div> <div class="kolumna">News</div> <div class="kolumna">Bannery</div> <div id="clear"></div> <div id="stopka">Stopka</div> </div> </body> <script> $(function() { $("#naglowek").animate( { width: 936, height: 200, opacity: 1.0}, 2000 ); $("#stopka").animate ( { width: 936, opacity: 1.0}, 2000 ); $("div.kolumna").hide(2000).show(2000); }); </script> |
style.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | kontener{ width: 960px; margin: 0 auto; } #naglowek{ margin: 10px; width: 10px; height: 200px; border: 2px solid black; opacity: 0; } .kolumna{ float: left; margin: 10px; width: 296px; height: 350px; border: 2px solid black; } #clear{ clear: both; } #stopka{ margin: 10px; width: 10px; height: 150px; border: 2px solid black; opacity:0; } |
Działający przykład:
link