Animated div show/hide (jQuery)

Question

$('.button').click(function() {
    $('#small-form').animate({
        width: ['toggle', 'swing'],
        height: ['toggle', 'swing'],
        opacity: 'toggle'
    }, 5000, 'linear');
    $('#big-form').animate({
        width: ['toggle', 'swing'],
        height: ['toggle', 'swing'],
        opacity: 'toggle'
    }, 5000, 'linear');
});

... this HIDEs both the elements, I want to hide small and show the big form.

Thanks!

Answer 1

Try this :

$('.button').click(function() {
$('#small-form').animate({
    width: ['toggle', 'swing'],
    height: ['toggle', 'swing'],
    opacity: 'toggle'
}, 5000, 'linear',
complete: $('#big-form').animate({
    width: ['toggle', 'swing'],
    height: ['toggle', 'swing'],
    opacity: 'toggle'
}, 5000, 'linear');
});

use complete: A function to call once the animation is complete. OR step: A function to be called after each step of the animation.

Answer 2

with you codes, it depends. if both forms are visible, then both are shown. Toggle means do the opposite, - if it's hidden, show it - if its height is greater than 0, make it 0.

suggestions:

1.) your code can be simplified to.

$('.button').click(function() {
    $('#small-form, #big-form').animate({
        width: ['toggle', 'swing'],
        height: ['toggle', 'swing'],
        opacity: 'toggle'
    }, 5000, 'linear');
});

2.) try hiding one of it first. Something like $('#small-form').hide()