Finishing Touches
You??™re now pretty much done implementing the help sidebar, but there are always a few
things you can do to make things a bit slicker. So to polish the feature a little bit you??™ll be
adding some animation and a few extra features.
Adding Animation with Moo.fx
Earlier in the chapter I briefly mentioned Moo.fx, the ultra-compact effects library. Now it??™s
time to put it into action. Let??™s make the help sidebar slide in and out instead of snapping
straight from one state to another.
At its most basic level, animation in JavaScript is all about manipulating one or more
style properties of an element over time. Moo.fx gives you a basic yet versatile interface to do
this with the fx.Style constructor, but first you need to look at the CSS to identify what style
properties you need to animate to get the sliding effect. Here are the rules in question:
body.with-help {
margin-right: 350px;
}
body.with-help #help {
background: #F4EEBC;
border: 1px solid #000;
border-color: #CCC #333 #333 #CCC;
width: 320px;
position: absolute;
top: 0;
right: 0;
margin: 8px 30px;
padding: 10px;
overflow: hidden;
}
A quick look at this code tells you that the margin-right property needs to be animated
out to 350px to make room for the help sidebar. At the same time you need to animate the
width property of the sidebar from 0 to 320px to give the effect of it opening out. Of course,
CHAPTER 9 n A DYNAMIC HELP SYSTEM 202
the reverse is required to close the sidebar again.
Pages:
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283