switchClass issue

switchClass issue

I want to use switchClass, perform some work, then switch the class back.  The first time the button is clicked, you see the transitions fine, but after that further clicks don't transition...
 
  1. <html>
    <head>
    <link type="text/css" href="http://jqueryui.com/themes/base/jquery.ui.all.css" rel="stylesheet" />
    </head>
    <body>
    <button id="emailConversation" name="emailConversation" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-mail-closed"></span></button>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
    <script type="text/javascript" src="http://jqueryui.com/ui/jquery.effects.core.js"></script>
    <script type="text/javascript" src="http://jqueryui.com/ui/jquery.effects.blind.js"></script>
    <script type="text/javascript" src="http://jqueryui.com/ui/jquery.ui.button.js"></script>
    <script type="text/javascript">
    $("#emailConversation").live("click", function () {
     var $icon = $(this).find("span");      
            $icon.switchClass('ui-icon-mail-closed', 'ui-icon-mail-open', 1000); //Fine the first time through the click...
      alert($icon.attr("class")); 
      //.. do a bunch of work, takes a couple seconds...  
      $icon.switchClass('ui-icon-mail-open', 'ui-icon-mail-closed', 1000);  
    });
    </script>
    </body>
    </html>




















      Thoughts?  The alert will fire every time the button is clicked, you just don't ever see the transition.  Is there a function I need to call to reset the class instead of using switch?