jQuery in Action
The jQuery Event Model
109
<html>
<head>
<title>jQuery Toggle Command Example</title>
<script type="text/javascript"
src="../scripts/jquery-1.2.1.js">
</script>
<script type="text/javascript">
$(function(){
$('#vstar').toggle(
function(event) {
$(event.target)
.css('opacity',0.4);
},
function(event) {
$(event.target)
.css('opacity',1.0);
}
);
});
</script>
</head>
<body>
<img id="vstar" src="vstar.jpg"/>
</body>
</html>
Listing 4.6 Invoking complementary listeners on every other click event
Figure 4.8 The
toggle()
command makes it easy to toggle the visual state of the image.
Applies toggle()
command to image
command to image
b
Odd listener grays
out the image
out the image
c
Even listener
restores full opacity
restores full opacity
d