title: jquery how to fire a call only after click event
body: <p>I'm currently implementing a click function with fade in effects, the only problem is if you don't click straight away the content has already faded away as it started fading when the page was loaded.<br>
  Here's my code:<br></p>
  
  <pre><code>$(document).ready(function(){
  $('#slide-02').hide();
  
  
  $('#button').click(function(){
  $('#slide-02').fadeIn(1000);
  $('#slide-01').hide();
  });
      var charToReplace = ['s', 'b', 'S', 'B'];
      $('#slide-02').html(function (i, v) {
          var resultStr = '';
          for (var i = 0; i &lt; v.length; i++ ) {
              var ch = v.charAt(i);
              
              if ($.inArray(ch, charToReplace) &gt;= 0) {
                 resultStr += '&lt;span class="hideMe"&gt;' + ch + '&lt;/span&gt;';  
              } else {
                 resultStr += ch;
              }
          }
          
          return resultStr;
      }).find('.hideMe').delay(2000).fadeOut(3000, function(){
          $(this).css('opacity', 0).show();            
      });
      
      //lets bring it all back
      setTimeout(function () {
          $('#slide-02').find('.hideMe').css('opacity', 0);
      }, 5000);
  });
  </code></pre>
  
  <p><br>Here's a live mock-up of the code in action too: <a href="http://nealfletcher.co.uk/fish/test2/" rel="nofollow">http://nealfletcher.co.uk/fish/test2/</a>
  <br>So <code>#slide-02</code> is hidden and when #button is clicked <code>#slide-02</code> fades in, the letters 's' and 'b' fade out of <code>#slide-02</code> but I only want these letters to start fading once <code>#slide-02</code> is visible and not start fading when the page is loaded, because currently if you don't click the button straight away, the letters have already faded.<br>
  Is there a way to only implement this call AFTER the click function has been implemented?<br>
  I will then be adding more slides, one after the other, so I'd like this call to work numerous times if that's possible? </p>