[jQuery] Fade effect

[scorey]

hey y'all,

I've created an animation that simply fades in a "cloud-like" bar that
will be my search bar.  This is supposed to happen when i click the
search Icon.

When I click the icon again, I want the search bar to disappear by
fading out.  I got it to work great once.  The problem is, the second
time that I click the icon, the bar fades in and then immediately
fades out again, ignoring the second click function.

any idea what I'm doing wrong? why does it work the first time I click
it and not the second?

Here's my js

  <script type="text/javascript">
      $(document).ready(function() {

          $(".searchIcon").click(function() {
              $(".searchBar:hidden").fadeIn(500);
              $(".searchIcon").click(function() {
                  $(".searchBar:visible").fadeOut(100);
              });
          });

      });
  </script>

Thanks