jQuery 1.4 Animation Techniques - Index of
jQuery 1.4 Animation Techniques - Index of jQuery 1.4 Animation Techniques - Index of
Download from Wow! eBook [ 51 ] Chapter 2 What just happened? The simple markup for this example consists of the container element and a series of nested unordered lists. As I mentioned, the way in which the selected element grows when it is acted upon by the show() method is dictated by the CSS positioning that it uses. In this case, we'd like the menu to grow down and to the right, so we position the submenus using their top and left properties. The submenus are also hidden initially with display:none; as is required for an element to be shown with the show() method. In the script, we first select each of the nested elements and then navigate up to their respective parent elements. We then use the mouseleave() and mouseenter() event helper method to attach the events. This is so that only list items containing submenus will have the listeners attached. In the anonymous functions supplied to these listeners, we navigate down to the nested and call the show() or hide() method as appropriate, triggering an animation by supplying the string fast. When we run this page in a browser, we should find that hovering the mouse pointer over one of the list items that contain a submenu cause the submenu to be animated into full size and opacity. Pop quiz – using show and hide 1. Which argument should be provided to trigger animations when using the show() or hide() methods? a. A callback function b. An object containing the duration and easing for the animation c. An integer or string specifying the duration of the animation, and/or a string specifying the easing d. An array containing the duration and easing for the animation 2. How is the direction of growth in the animated element controlled? a. By its CSS positioning properties b. By setting a property of the jQuery object c. By passing an object containing values for left and top properties into the method d. It cannot be controlled
Fading Animations Animated toggling jQuery provides a toggle() method, which can be used in several different ways depending on which arguments are passed to it. Normally it is used to execute two or more functions alternately, but like the show() or hide() methods, it can be used to create animations when a duration or easing is supplied as an argument. When animations are required from the toggle() method, we should simply supply a duration and/or an easing argument, which may take the same numerical or string based format as the other animation methods we have looked at so far. The same rules about CSS positioning also apply to the toggle() method, so the direction of animation is easy to customize. The duration argument may be of string or integer types, and a callback function may be provided if required. The easing argument should be in string format. The toggle() method works in a similar way to the fadeToggle() method that we looked at earlier in the chapter. It contains logic that checks the current state of the element and either shows, or hides the element based on this. The method should be seen merely as a convenient short-cut that may be beneficial in some basic situations. From a performance perspective, the show() and hide() methods are marginally more efficient as there is no internal check on the current visibility of the element being animated. It is effectively a combination of the show() and hide() methods. Time for action – replacing show and hide with toggle In this example, we'll change our showHide.html page so that the submenus are displayed (or hidden) with toggle() instead of using show() and hide(). 1. All that needs to change is the script: subMenuParent.mouseenter(function() { }); $(this).find("ul").toggle("fast"); subMenuParent.mouseleave(function() { }); $(this).find("ul").toggle("fast"); [ 52 ]
- Page 21 and 22: Drawing to the canvas 309 Supportin
- Page 23 and 24: Preface What this book covers Chapt
- Page 25 and 26: Preface Have a go hero - heading Th
- Page 27 and 28: Preface Piracy Piracy of copyright
- Page 29 and 30: Introduction In addition to animate
- Page 31 and 32: Introduction When not to use animat
- Page 33 and 34: Introduction of the template file"
- Page 35 and 36: Introduction In the previous screen
- Page 37 and 38: Introduction Once our variables hav
- Page 40 and 41: 2 Fading Animations In this chapter
- Page 42 and 43: [ 21 ] Chapter 2 We can control the
- Page 44 and 45: The previous screenshot shows how t
- Page 46 and 47: [ 25 ] Chapter 2 Most of the styles
- Page 48 and 49: 2. What else can be passed into the
- Page 50 and 51: Time for action - creating the dial
- Page 52 and 53: [ 31 ] Chapter 2 For example, the a
- Page 54 and 55: Download from Wow! eBook The follo
- Page 56 and 57: [ 35 ] Chapter 2 The CSS is used mo
- Page 58 and 59: The fadeTo() method is used in the
- Page 60 and 61: [ 39 ] Chapter 2 #messageList table
- Page 62 and 63: [ 41 ] Chapter 2 What just happened
- Page 64 and 65: 2. What format can these arguments
- Page 66 and 67: } var el = $(this); if (el.css("fil
- Page 68 and 69: [ 47 ] Chapter 2 Usually these meth
- Page 70 and 71: Time for action - animations with s
- Page 74 and 75: 2. Save the changes as toggle.html.
- Page 76 and 77: 3 Managing Animations Like most of
- Page 78 and 79: [ 57 ] Chapter 3 A custom queue tha
- Page 80 and 81: If we wish to see how many function
- Page 82 and 83: 2. What does the queue() method ret
- Page 84 and 85: [ 63 ] Chapter 3 The argument we su
- Page 86 and 87: [ 65 ] Chapter 3 We pass a callback
- Page 88 and 89: [ 67 ] Chapter 3 The first argument
- Page 90 and 91: Delaying queue execution [ 69 ] Cha
- Page 92 and 93: [ 71 ] Chapter 3 Also note that the
- Page 94 and 95: 4 Sliding Animations Another type o
- Page 96 and 97: Time for action - creating a slide-
- Page 98 and 99: [ 77 ] Chapter 4 header form input
- Page 100 and 101: Pop quiz - sliding elements down 1.
- Page 102 and 103: Download from Wow! eBook }); }); $
- Page 104 and 105: Toggling the slide [ 83 ] Chapter 4
- Page 106 and 107: [ 85 ] Chapter 4 } h2 { margin:0; p
- Page 108 and 109: [ 87 ] Chapter 4 The previous scree
- Page 110 and 111: Pop quiz - using slideToggle 1. Wha
- Page 112 and 113: [ 91 ] Chapter 4 Easing is a great
- Page 114 and 115: [ 93 ] Chapter 4 Home Articles J
- Page 116 and 117: [ 95 ] Chapter 4 3. Save this file
- Page 118 and 119: In the previous screenshot, we see
- Page 120 and 121: Pop quiz - fixing the flicker 1. Wh
Download from Wow! eBook <br />
[ 51 ]<br />
Chapter 2<br />
What just happened?<br />
The simple markup for this example consists <strong>of</strong> the container element and a series <strong>of</strong><br />
nested unordered lists.<br />
As I mentioned, the way in which the selected element grows when it is acted upon by the<br />
show() method is dictated by the CSS positioning that it uses. In this case, we'd like the<br />
menu to grow down and to the right, so we position the submenus using their top and left<br />
properties. The submenus are also hidden initially with display:none; as is required for<br />
an element to be shown with the show() method.<br />
In the script, we first select each <strong>of</strong> the nested elements and then navigate up to their<br />
respective parent elements. We then use the mouseleave() and mouseenter()<br />
event helper method to attach the events. This is so that only list items containing submenus<br />
will have the listeners attached.<br />
In the anonymous functions supplied to these listeners, we navigate down to the nested<br />
and call the show() or hide() method as appropriate, triggering an animation by<br />
supplying the string fast.<br />
When we run this page in a browser, we should find that hovering the mouse pointer over<br />
one <strong>of</strong> the list items that contain a submenu cause the submenu to be animated into full size<br />
and opacity.<br />
Pop quiz – using show and hide<br />
1. Which argument should be provided to trigger animations when using the show()<br />
or hide() methods?<br />
a. A callback function<br />
b. An object containing the duration and easing for the animation<br />
c. An integer or string specifying the duration <strong>of</strong> the animation, and/or a string<br />
specifying the easing<br />
d. An array containing the duration and easing for the animation<br />
2. How is the direction <strong>of</strong> growth in the animated element controlled?<br />
a. By its CSS positioning properties<br />
b. By setting a property <strong>of</strong> the <strong>jQuery</strong> object<br />
c. By passing an object containing values for left and top properties into<br />
the method<br />
d. It cannot be controlled
Change language