Анимированные 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');
});

... это скрывает оба элемента, я хочу скрыть маленький и показать большую форму.

Спасибо! * * 1004

Answer 1

с вашими кодами, это зависит. если обе формы видны, то отображаются обе. Переключить означает сделать наоборот, - если он скрыт, показать его - если его высота больше 0, сделать его 0.

предложения:

1.) Ваш код может быть упрощен до.

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

2.) Попробуйте сначала спрятать одну из них. Что-то вроде $('#small-form').hide()

Answer 2

Попробуйте это:

$('.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: функция для вызова после завершения анимации. ИЛИ шаг: функция, вызываемая после каждого шага анимации.