Question

我希望slideDown() div选择适当的radio，slideUp为有效$(document).ready(function() { $("#private").click(function() { $('#registration-brand, #registration-shop').slideUp(); $('#registration-private').slideDown(); }); $("#shop").click(function() { $('#registration-brand, #registration-private').slideUp(); $('#registration-shop').slideDown(); }); $("#brand").click(function() { $('#registration-shop, #registration-private').slideUp(); $('#registration-brand').slideDown(); }); });。

然而，就像现在一样，在某些情况下，它被推倒，在其他情况下被推高。

（私人 - ＆gt; Shop = Up，Shop - ＆gt; Private = Down）

我希望它永远被推倒。我做错了什么？

这是JSFiddle上的当前状态：http://jsfiddle.net/mfmU7/

原始Javascript代码：

{{1}}

Answer 1

关于DOM（或z-index）中的位置：

$(document).ready(function() {
    $('.btn').on('click', function() {
        var that = $('#registration-'+this.id);
        $('.registration-type:visible').not(that).slideUp().before(that.slideDown());
    });
});

FIDDLE

Answer 2

问题（一些在视觉上向上滑动，一些在视觉上向下滑动）是由于，在您的原始代码中，所有动画一次发生并且div垂直放置在另一个之上。所以顶部的一个看起来像是向下滑动，但另外两个看起来是向下滑动，看起来它们是从底部突然出现，因为它正处于隐藏过程中。

我喜欢这样做，所以一个动作在其他动作结束之前不会开始：

$("#private").click(function() {

    $('#registration-brand, #registration-shop').slideUp(function() {
        $('#registration-private').slideDown();
    });

});

FIDDLE HERE

这样做的问题（就像我通常那样）是函数被调用两次，一次是已经隐藏的div完成隐藏，几乎是立即，一次在另一个div完成隐藏之后（4/10秒后））。第二个没有做任何事情，因为出现的div已经完全可见（或几乎如此）。

所以......需要另一种解决方案。

这个有一个完全不同的外观，因为它等待两个上滑动作完成（即使已经隐藏了一个div），然后再开始向下滑动。 'promise（）'创建了一些东西，当所有'slideUp（）'调用完成动画时它们将被完成，'always（）'在完成后调用该函数。

$("#private").click(function() {

    $('#registration-brand, #registration-shop').slideUp().promise().always(function() {
        $('#registration-private').slideDown();
    });

});

ALTERNATE FIDDLE

Answer 3

我有同样的问题，我通过添加：

来解决它

position:absolute; 
bottom:85%;

到CSS，它解决了你的问题

然后你必须再次放置那些div

此处：http://jsfiddle.net/isair/mfmU7/4/

slideUp / slideDown不一致

3 个答案: