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

use complete：动画完成后调用的函数。或步骤：在动画的每个步骤之后调用的函数。

动画div show / hide（jQuery）

2 个答案: