When your code is first executed, it adds a click handler to the .searchIcon
element. Then, when the element is clicked, the click handler (the outer
one) adds *another* click handler (the inner one). The next time you click
it, both of these handlers are executed, causing the effect you saw. It's
not ignoring the second click handler, it's running both of them.
I would fix it by using a single click handler to handle both the fadeIn and
the fadeOut:
<script type="text/javascript">
$(document).ready(function() {
var $searchBar = $(".searchBar");
$(".searchIcon").click( function() {
if( $searchBar.is(':hidden') )
$searchBar.fadeIn(500);
else
$searchBar.fadeOut(100);
});
});
</script>
HOWEVER... Be advised that any text in your searchBar will look terrible in
IE while it is fading. IE will render that text without antialiasing during
the fade. Once the fade is completed, it will switch to normal antialiased
rendering.
If the searchBar contains only graphics, this won't be a problem. But text
will look pretty ugly. (Sorry!)
-Mike
On Sat, Sep 26, 2009 at 11:29 AM, scorey <scorey1...@gmail.com> wrote:
>
> 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
>
