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