动画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)
谢谢!
答
与你的代码,它取决于。如果两个表单都可见,则显示两者。切换方式却反其道而行之, - 如果它是隐藏的,表现出来 - 如果其高度大于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()
+0
它的作品很棒。以前我是用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步骤:在动画的每一步之后调用的函数。
是'#big-form' already hidden? – jAndy 2010-10-05 06:54:42
包装是100px与溢出:隐藏,小型100px所以大型隐藏,即使没有显示:无 – 3zzy 2010-10-05 06:58:17