CODEWITHSUNDEEP
jqueryanimation
Gradislava Bikkulova
Gradislava Bikkulova

Reputation: 331

jquery endless animation issue

I want to creat a really simple menu, a div "test" is hidden and when I click on a div "trig", test is showing. Then when I click on trig again, test is hidding. It's working for the first click, then when i'm clicking again on trig the animation plays 2 times, and when I'm clicking again it plays 3 times, and again and again.

my code is :

<div class="trig">trig</div>
<div class="test">test</div>

<script src="jquery.js"></script>
<script>
$(function () {

$('.test').hide();

function bis() { 
    $('.trig').click(function() { 
        var trig = $(this);
        var test = trig.next();
        test.show(300,function() {
            trig.click(function(){
                test.hide(300, function() { bis(); })
            ;});
        ;});
    });
};

bis();

});
</script>

Upvotes: 1

Views: 92

Answers (2)

bpoiss
bpoiss

Reputation: 14023

Your function is only working one time, because after that, if you click the trigger, first the $('.trig').click(function() is called, that shows your test, and after that, also the trig.click(function() in the callback of show is called, whitch hides your test immediatly again.

Use the toggle() function to toggle elements. 

$('.trig').click(function() { 
    var trig = $(this);
    var test = trig.next();
    test.toggle(300);
});

Documentation: http://api.jquery.com/toggle/

Fiddle: http://jsfiddle.net/suEg4/

Upvotes: 2

Pandian
Pandian

Reputation: 9136

This is simple thing... try like below... it will work...

Fiddle Example : http://jsfiddle.net/RYh7U/103/

 $('.test').toggle();
 $('.trig').click(function() { 
     $('.test').toggle("slow");
});

Upvotes: 0

Related Questions