CODEWITHSUNDEEP
jquery
Tuhin Bhatt
Tuhin Bhatt

Reputation: 362

Jquery Button Click Chaining

I have Created a simple Jquery Code..

The Code is 

<script type="text/javascript">
            $('#Button1').click(function (evt) {
                evt.preventDefault();
                $('#Textbox1').animate({ width: '300px', height: '75px' })
            })
           </script>

Now i want to chain the result So On clicking the button another time I get the Original Textbox Size back

I tried this code below but it does not work. Any suggestions?

<script type="text/javascript">
            $('#Button1').click(function (evt) {
                evt.preventDefault();
                $('#Textbox1').animate({ width: '300px', height: '75px' }) })
                .animate({ width: '100px', height: '10px' })
                });
           </script>

Upvotes: 1

Views: 2815

Answers (3)

aroth
aroth

Reputation: 54806

How about this:

<script type="text/javascript">
    $('#Button1').click(function (evt) {
        evt.preventDefault();
        $('#Textbox1').animate({ width: '300px', height: '75px' }, function() {
            $('#Textbox1').animate({ width: '100px', height: '10px' });
        });
    });
</script>

This is using the first animation's complete callback function in order to start the second animation.

Or if you don't want to "chain" the animations, and instead want to perform the opposite animation on a second click (which is a toggle, not a chain), try:

<script type="text/javascript">
    $('#Button1').click(click1);

    function click1(evt) {
        evt.preventDefault();
        $('#Textbox1').animate({ width: '300px', height: '75px' }, function() {
            $('#Button1').unbind('click');
            $('#Button1').click(click2);
        });
    }

    function click2(evt) { 
        evt.preventDefault();
        $('#Textbox1').animate({ width: '100px', height: '10px' }, function() {
            $('#Button1').unbind('click');
            $('#Button1').click(click1);
        });
    }
</script>

Example: http://jsfiddle.net/52A3w/1

Upvotes: 2

Felix Kling
Felix Kling

Reputation: 816462

You want to execute two different functions on alternate clicks. At the first click you change the size and on the second click you change it back to the original. You can use toggle [docs] for that:

$('#Button1').toggle(function(evt) {
    evt.preventDefault();
    $('#Textbox1').stop().animate({ width: '300px', height: '75px' });
}, function(evt) {
    evt.preventDefault();
    $('#Textbox1').stop().animate({ width: '100px', height: '10px' });
});

Update: Here is a demo. Apparently someone disagrees with my answer. This should show that it works.

Upvotes: 0

zb&#39;
zb&#39;

Reputation: 8059

something like that should work

<script type="text/javascript">
           $('#Button1').click(function (evt) {
                evt.preventDefault();
             var button=$(this);
             if (button.hasClass('widecontent') {
                 $('#Textbox1').animate({ width: '100px', height: '10px' });
                  } else       
                {
                  $('#Textbox1').animate({ width: '300px', height: '75px' }) });
                }
       button.toggleClass('widecontent');
 });
</script>

Upvotes: 0

Related Questions