Resolved Understanding how to make this use a timer

[Chris Hick]

    <script type="text/javascript">
    $(document).ready(function(){
        $(".trigger").click(function(){
            $(".panel").toggle("fast");
            $(this).toggleClass("active");
            return false;
            }
        });
    });
    </script>

This is the jQuery code, I have right now. I have been trying to set it to use a timer after the click that will cause the menu to return to it original state. I have had no luck. Is there anyway one of you could explain to me how I can go about this?

[seco]

what do you mean by timer? you want a delay in the toggle?

[Chris Hick]

I want the menu to display when clicked then after a certain amount of time it goes back to normal.

For instance lets say, I click this grey box that says menu.. then a table like menu displays right next to it. Right now it just stays there. I would like after a certain amount of time that it returns to only displaying the grey box.

[devnull69]

Right now you toggle the elements of class ".panel". So what you want is
- Find out if it's currently active
- If it's active, deactivate automatically after x seconds

    $(document).ready(function(){
        $(".trigger").click(function(){
            $(".panel").toggle("fast");
            $(this).toggleClass("active");
            if($(this).hasClass("active")) {
               window.setTimeout(function() {
                  $(".panel").toggle("fast");
                  $(this).toggleClass("active");
               }, x * 1000);   // replace your x here
            }
            return false;
            }
        });
    });

[Chris Hick]

Ah, why did I not think of the If statement.. This is much appreciated, Devnull69. I should always remember that if something starts, I have to end it.

But I will say that you have a curly bracket that causes it not to work.(The one after the return false; statement.) I removed it in my code and it works perfectly.

[devnull69]

lol yes I just copy/pasted it from your code which I expected to be working correctly

[seco]

if you are using jquery 1.4 yo can simple do

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

            $(".panel").show("fast").delay(2000).hide("fast");

        });
    });
    </script>

You can change the delay time "1000 = 1 sec" and effect with

//slide effect
$(".panel").slideDown("fast").delay(4000).slideUp("fast");

//fade effect
$(".panel").fadeIn("fast").delay(2000).fadeOut("fast");

or go crazy and play with the css and animation effects. but yeah, 1.4 has delay which is awesome.

here is an example with the fade
http://www.blueicestudios.com/delay/