title: Simple example of a strange problem with jquery toggle
body: <p>I'm trying to do a simple partial fade effect using toggle to toggle the opacity between two values, when an element is clicked.  But the first click does nothing!</p>
  
  <p>The html code:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script type="text/javascript" src="../jquery-1.4.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="toggle.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div class="toggler" style="background:grey;width:300px;height:300px;"&gt;&lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And the js code:</p>
  
  <pre><code>$(document).ready(function() {
      $('div.toggler').click(function(event) {
          $(this).unbind('click');
  
          $('div.toggler').toggle(function(event) {
              $('div.toggler').css({
                  'opacity': 0.5
              });
              alert('0.5');
              return false;
          }, function() {
              $('div.toggler').css({
                  'opacity': 0.1
              });
              alert('0.1');
              return false;
          });
          event.preventDefault();
      });
  });
  </code></pre>
  
  <p>To elaborate, it does "work", <strong>but</strong> only <em>after</em> the first click!  So I need to click twice to begin with to get it working!  I've tried this out in firefox and opera.</p>
  
  <p>Edit: Went with the solution by Marcus Sá and steweb:</p>
  
  <pre><code>$('div.toggler').toggle(
      function(event){
          $(this).css({ 'opacity':0.5 });
          alert('0.5');
          return false;
      }, 
      function(){
          $(this).css({ 'opacity':0.1 });
          alert('0.1');
          return false;
      }
  );
  </code></pre>