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>

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

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.

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>