jQuery 1.4 Animation Techniques - Index of
jQuery 1.4 Animation Techniques - Index of jQuery 1.4 Animation Techniques - Index of
[ 95 ] Chapter 4 3. Save this file as slideFlicker.css, and add a link to the file from the of slideFlicker.html (directly after the link to fadeIn.css). 4. Finally, update the second element at the bottom of slideFlicker. html so that it appears as follows (new code shown in bold): var ul = $("nav ul"); ul.removeClass("purecss"); ul.find("a").each(function(){ if (!$(this).closest(".subnav").length) { var a = $(this); a.append("" + a.text() + ""); } }); ul.find("a").hover(function() { $(this).find("span").fadeIn("slow"); }, function() { $(this).find("span").hide(); }); $(".subnav", ul).parent().mouseenter(function() { $(this).find(".subnav").stop(true, true).slideDown("fast"); }); $(".subnav", ul).parent().mouseleave(function() { $(this).find(".subnav").stop(true, true).slideUp("fast"); }); What just happened? All we've done to the underlying HTML is added a couple of submenus to two of the top level list items in the . One of the submenus is a split menu made up of two elements inside a , the other is a single menu built from a standard . We've also added some new styling, mostly to carry on the theme from the original example. Some of the CSS is used to override previous rules set in the original stylesheet. Mostly the styling is purely for aesthetics, and we use a lot of CSS3 rounded-corner styling, which will not be apparent in all browsers.
Sliding Animations For the animations to work as intended, the submenus should initially be hidden from view with display:none. For the flicker effect to occur, the submenus should be wider than the parent that they are contained within. We've made one of our submenus wider, and the other one the same width so that we can easily see the difference. In the , we've added a simple check when the fading elements are added to the page so that the fade effect isn't applied to the submenus (it could easily be adapted to work, but we're looking at a different effect in this particular example). Following this we attach mouseenter and mouseleave effect handlers to the parents of any elements with the class subnav. In these handlers, we simply find the subnav within the element that triggered the event and either show or hide it with a slide effect. The stop() method is used to prevent animation build-up, as described in the previous chapter. Take a look at the page in a browser and note the difference between the two submenus: [ 96 ]
- 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 72 and 73: Download from Wow! eBook [ 51 ] Ch
- 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 118 and 119: In the previous screenshot, we see
- Page 120 and 121: Pop quiz - fixing the flicker 1. Wh
- Page 122 and 123: 5 Custom Animations The predefined
- Page 124 and 125: An alternative syntax for animate()
- Page 126 and 127: [ 105 ] Chapter 5 width:295px; marg
- Page 128 and 129: [ 107 ] Chapter 5 What just happene
- Page 130 and 131: [ 109 ] Chapter 5 Although not esse
- Page 132 and 133: [ 111 ] Chapter 5 The previous scre
- Page 134 and 135: [ 113 ] Chapter 5 The styles we use
- Page 136 and 137: [ 115 ] Chapter 5 What just happene
- Page 138 and 139: }, html: copy, width: expander.widt
- Page 140 and 141: [ 119 ] Chapter 5 If the image alre
- Page 142 and 143: [ 121 ] Chapter 5 d. Two objects wh
- Page 144 and 145: [ 123 ] Chapter 5 text-align:center
- Page 146 and 147: [ 125 ] Chapter 5 What just happene
- Page 148 and 149: [ 127 ] Chapter 5 Finally, we retur
- Page 150 and 151: [ 129 ] Chapter 5 Once we've define
- Page 152 and 153: } }; $(config.selector).find("a").c
- Page 154 and 155: [ 133 ] Chapter 5 In the previous s
- Page 156: Have a go hero - extending the plug
- Page 159 and 160: Extended Animations with jQuery UI
- Page 161 and 162: Extended Animations with jQuery UI
- Page 163 and 164: Extended Animations with jQuery UI
- Page 165 and 166: Extended Animations with jQuery UI
Sliding <strong>Animation</strong>s<br />
For the animations to work as intended, the submenus should initially be hidden from view<br />
with display:none. For the flicker effect to occur, the submenus should be wider than the<br />
parent that they are contained within. We've made one <strong>of</strong> our submenus wider, and<br />
the other one the same width so that we can easily see the difference.<br />
In the , we've added a simple check when the fading elements are added<br />
to the page so that the fade effect isn't applied to the submenus (it could easily be adapted<br />
to work, but we're looking at a different effect in this particular example).<br />
Following this we attach mouseenter and mouseleave effect handlers to the parents <strong>of</strong><br />
any elements with the class subnav. In these handlers, we simply find the subnav within<br />
the element that triggered the event and either show or hide it with a slide effect. The<br />
stop() method is used to prevent animation build-up, as described in the previous chapter.<br />
Take a look at the page in a browser and note the difference between the two submenus:<br />
[ 96 ]
Change language