should_be_simple.js

// Why would example 1 work, but example 2 not work? (only difference is the opacity property)
// jQuery 1.4.2 in use

      // Example 1
      $("ul.pagination li a").hover(
         function(){
            $(this).siblings('.thumb').animate({
               top: "-80px",
               opacity: 'toggle'
            },500);
         },
         function(){
            $(this).siblings('.thumb').animate({
               top: "-90px",
               opacity: 'toggle'
            },300);
         }
      );


      // Example Two
      $("ul.pagination li a").hover(
         function(){
            $(this).siblings('.thumb').animate({
               top: "-80px",
               opacity: 1
            },500);
         },
         function(){
            $(this).siblings('.thumb').animate({
               top: "-90px",
               opacity: 0
            },300);
         }
      );

I determined that the problem was how jQuery interprets the opacity property 'toggle' versus a numeric value. When set to 'toggle' it also sets the display property during the animation. If you give it a numeric value it just changes the opacity values.

So, if your element has a CSS display property set to "none" then animating to a numeric value will not change anything for you. Hence my problem above.

Problem solved.