jQuery in Action
138
CHAPTER 5
Sprucing up with animations and effects
Let's invert the sense of the test and check the state of the children before we
issue the animated toggle.
The new ready handler, with changes highlighted in bold, is shown in listing 5.3.
$(function(){
$('li')
.css('pointer','default')
.css('list-style-image','none');
$('li:has(ul)')
.click(function(event){
if (this == event.target) {
$(this).css('list-style-image',
(!$(this).children().is(':hidden')) ?
'url(plus.gif)' : 'url(minus.gif)');
$(this).children().toggle('slow');
}
return false;
})
.css({cursor:'pointer',
'list-style-image':'url(plus.gif)'})
.children().hide();
$('li:not(:has(ul))').css({
cursor: 'default',
'list-style-image':'none'
});
});
The page with these changes can be found in file chapter5/collapsible.list.take
.3.html.
.3.html.
Knowing how much people like us love to tinker, we've set up a handy tool that
we'll use to further examine the operation of these commands.
Introducing the jQuery Effects Lab Page
Back in chapter 2, we introduced the concept of lab pages to help us experiment
with using jQuery selectors. For this chapter, we set up a lab page for exploring
the operation of the jQuery effects in file chapter5/lab.effects.html.
with using jQuery selectors. For this chapter, we set up a lab page for exploring
the operation of the jQuery effects in file chapter5/lab.effects.html.
Loading this page into your browser results in the display shown in figure 5.4.
This lab page consists of two main panels: a control panel in which we'll spec-
This lab page consists of two main panels: a control panel in which we'll spec-
ify which effect will be applied and one that contains four test subject elements
upon which the effects will act.
upon which the effects will act.
"Are they daft?" you might be thinking. "There are only two test subjects."
Listing 5.3 Our list example augmented with the animated effects