动画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）

回答

相关问题