動畫div顯示/隱藏（jQuery）

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

...這隱藏了這兩個元素，我想隱藏小而顯示大的形式。動畫div顯示/隱藏（jQuery）

謝謝！

來源

2010-10-05 3zzy

是'＃big-form' already hidden？ – jAndy 2010-10-05 06:54:42

包裝是100px與溢出：隱藏，小型100px所以大型隱藏，即使沒有顯示：無 – 3zzy 2010-10-05 06:58:17

與你的代碼，它取決於。如果兩個表單都可見，則顯示兩者。切換方式卻反其道而行之， - 如果它是隱藏的，表現出來 - 如果其高度大於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()

來源

2010-10-05 07:00:36 Reigel

它的作品很棒。以前我是用CSS高度做的，然後將div擴展到自動高度，但是這個小片段很短，並且做了所有的魔術。 – 2015-02-02 16:51:58

試試這個：

$('.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步驟：在動畫的每一步之後調用的函數。

來源

2010-10-05 07:00:05 jknair

動畫div顯示/隱藏（jQuery）

回答

相關問題