Listing 4.26: preserving $(this) for callbacks.

Chapter 4/04.js

@@ -38,23 +38,31 @@ $(document).ready(function () {
     var paraWidth = $('div.speech p').outerWidth();
     var $switcher = $(this).parent();
     var switcherWidth = $switcher.outerWidth();
-    $switcher.css({ position: 'relative' })
-      .fadeTo('fast', 0.1)
-      .animate({left: paraWidth - switcherWidth}, {duration: 'slow', queue: false})
+    $switcher
+      .css({position: 'relative'})
+      .fadeTo('fast', 0.5)
+      .animate({
+        left: paraWidth - switcherWidth
+      }, {
+        duration: 'slow', 
+        queue: false
+      })
       .fadeTo('slow', 1.0)
       .slideUp('slow')
       .queue(function (next) {
-        $switcher.css({'background-color': '#f00'});
+        $switcher.css({backgroundColor: '#f00'});
         next();
       })
-      .slideDown('slow')
-    ;
+      .slideDown('slow');
   });
 
-  $('p').eq(2).css('border', '1px solid #333').click(function () {
-    $(this).next().slideDown('slow', function () {
-        $(this).slideUp('slow');
+  $('p').eq(2)
+    .css('border', '1px solid #333')
+    .click(function () {
+      var $clickedItem = $(this);
+    $clickedItem.next().slideDown('slow', function () {
+        $clickedItem.slideUp('slow');
     });
   });
-  $('p').eq(3).css('background-color', '#ccc').hide();
+  $('p').eq(3).css('backgroundColor', '#ccc').hide();
 });