- 2.1. Accessing Elements and Protecting the DOM
- 2.2. Editing the Web Page with DHTML ? la jQuery
- 2.3. Animatedly Reducing and Enlarging of an Element
- 2.4. Changing Attributes Dynamically
- Summary
This chapter is from the book
This chapter is from the book
This chapter is from the book
2.3. Animatedly Reducing and Enlarging of an Element
Now we want to use jQuery to animatedly reduce and enlarge an element to hide or show it. First, let’s look at the external CSS file in the subdirectory lib, in which a property is defined that has specific consequences for the following animation (ch2_3.css):
Listing 2.5. The CSS File
01 body {
02 background: lightgray;color: blue;
03 }
04 #i1 {
05 width:300px; height:225px;
06 }
07 #i2 {
08 height:225px;
09 }
10 #h2{
11 background: white; color:#0000FF; font-size: 18px;
12 }
The specification that is interesting for the following example is the width data in line 5. The ID used as selector references an image. The width specification influences the type of the animation that follows. But first, let’s look at the web page itself. It basically contains two images and some text below. We want to animate all three elements (ch2_3.html):
Listing 2.6. Reducing or Enlarging Two Images and Some Text
...
06 <link type="text/css" rel="stylesheet"
07 href="lib/ch2_3.css" />
08 <script type="text/javascript"
09 src="lib/jquery-1.8.min.js"></script>
10 <script type="text/javascript">
11 $(document).ready(function(){
12 $("#toggle1").click(function(event){
13 $('#i1').slideToggle('slow');
14 });
15 $("#toggle2").click(function(event){
16 $('#i2').slideToggle('slow');
17 });
18 $("#toggle3").click(function(event){
19 $('#h2').slideToggle('slow');
20 });
21 });
22 </script>
23 </head>
24 <body>
25 <h1>Animated showing and hiding
26 of an image and text with jQuery</h1>
27 <button id="toggle1">Toggle Image 1</button>
28 <button id="toggle2">Toggle Image 2</button>
29 <button id="toggle3">Toggle Text</button><hr/>
30 <img src="images/i1.jpg" id="i1" />
31 <img src="images/i2.jpg" id="i2" /><hr/>
32 <h2 id="h2">A ski jump</h2>
33 </body>
34 </html>
At the core of this animation is the method slideToggle(). This name is also very telling. You can use this effect to show or hide objects depending on the current state, or to reduce or enlarge them. In other words, the current state is toggled to the opposite state. You can see it applied in lines 13, 16, and 19.
)
Figure 2.5. The original looks like this.
If you reconstruct the animation of the first image, you will see that reducing the image results in a reduction in image height and the image then disappears altogether. Vice versa, the image grows upward from that point if you enlarge it.
)
Figure 2.6. Here, the first image is squashed down.
Of massive importance for this behavior is that the width of this image is specified via the CSS rule for the ID i1. This prevents the width from also being reduced. The animation of the second image whose width is not specified shows what that looks like. You will see that on reducing the image, it shrinks into the lower-left corner of the image and then disappears altogether. Vice versa, the image grows outward from this point to the top right.
)
Figure 2.7. The second image shrinks animatedly in width and height.
But now observe what happens to the text if you click the third button. The heading also disappears but only in terms of height.
For the effect of slideToggle(), it matters to what type of element the animation technique is applied, and the CSS rules that have been previously applied to an element also play a role.
The animations in the example are basically independent from one another. If you set the interval for running the animation long enough, you can have the animations run in parallel.
)
Figure 2.8. The three elements are animated in parallel.
In that case, note that the content positioned lower down is moved upward or could be repositioned vertically if a preceding element has disappeared completely. (In effect, it is removed from the text flow.)
But what happens in the example if you click the same button several times? This answer might surprise you: The events are cumulated. This means they are executed consecutively; the next event is executed only when the previous one has been fully processed. So, clicking the button again does not cause the current animation to stop and the next one to commence immediately. If that is what you want to achieve, you have to program it explicitly.