動畫div顯示/隱藏（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'); 
}); 

...這隱藏了這兩個元素，我想隱藏小而顯示大的形式。

謝謝！

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'); 
}); 

使用完整：調用的函數，一旦動畫完成。 OR步驟：在動畫的每一步之後調用的函數。