CODEWITHSUNDEEP
jquery
Wang'l Pakhrin
Wang'l Pakhrin

Reputation: 868

I want to animate a menu div with jquery, show/hide with a click

When I click the .nv-menu link, it shows the div but if I click again I want it to animate to hide, also if I click outside the .short-menu div, I want it to hide again. Can anyone help me please?

This is the code below

<script>
    $(window).ready(function(e) {
            $(".nv-menu").click(function(e) {
                e.preventDefault();

                $(".short-menu").animate({"left":"100px"}, "slow").show();
            });
    });
</script>

Upvotes: 1

Views: 2884

Answers (5)

user2036918
user2036918

Reputation:

The corrected code is below .. try this

<script>
    $(window).ready(function(e) {
            var a =0;
            $(".nv-menu").click(function(e) {
                e.preventDefault();
                if (a==0)
                  {
                      $(".short-menu").animate({"left":"100px"}, "slow").show();
                      a=1;
                  }
                else
                   {
                     $(".short-menu").animate({"left":"10px"}, "slow");
                       // left: 10px to be back to the position
                       a=0;
                   }
             });

            });
</script>

Upvotes: 2

Amin Saqi
Amin Saqi

Reputation: 18977

Here:

$(window).ready(function() {

        // for clicks on menu:
        $(".nv-menu").click(function(e) {
            e.preventDefault();


            $(".short-menu").animate({"left":"100px"}, "slow").toggle(); 
        });

        // for clicks else where:
        $("body").click(function(e) {
            var target = $(e.target);  
            if (!target.is(".nv-menu"))
                $(".short-menu").animate({"left":"100px"}, "slow").hide();
        });
});

Upvotes: 0

DannyTheDev
DannyTheDev

Reputation: 4173

something like this might be worth looking into

<script>
    $(window).ready(function(e) {
        var action = 100;
        $(".nv-menu").click(function(e) {
            e.preventDefault();
            $(".short-menu").animate({"left":action+"px"}, "slow");
            action = (action == 100) ? -100 : 100;
        });
    });
</script>

This just animates in and out.. you can change the -100 to whatever the original state was..

examples:

Upvotes: 0

Tushar Gupta - curioustushar
Tushar Gupta - curioustushar

Reputation: 57105

.toggle()

$(window).ready(function(e) {
            $(".nv-menu").click(function(e) {
                e.preventDefault();

                $(".short-menu").animate({"left":"100px"}, "slow").toggle(); //replaced toggle here
            });
    });

Upvotes: 0

Tinathnath
Tinathnath

Reputation: 69

You can use a "state variable".

For exemple:

<script>
    $(window).ready(function(e) {
            var state = 1;
            $(".nv-menu").click(function(e) {
                e.preventDefault();
                if(state == 1)
                {
                    $(".short-menu").animate({"left":"100px"}, "slow").show();
                    state = 2;
                }
                else if(state == 2)
                {
                     //do reverse animation here
                }
            });
    });
</script>

Upvotes: 0

Related Questions