1

我想slideDown()在选择div适当的活动时radio和slideUp一个活动。

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

（私人 -> 商店 = 向上，商店 -> 私人 = 向下）

我希望它总是被推倒。我究竟做错了什么？

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

以及原始的 Javascript 代码：

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

    });

});
4

3 回答 3

2

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

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

小提琴

于 2013-08-01T21:44:34.437 回答
0

问题（一些视觉上向上滑动，一些视觉上向下滑动）是因为在您的原始代码中，所有动画都同时发生，并且 div 垂直放置在另一个之上。所以最上面的一个看起来像是在往下滑，而另外两个在滑下来的时候看起来像是从底部弹出来的，因为那个正在隐藏的过程中。

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

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

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

});

在这里提琴

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

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

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

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

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

});

备用小提琴

于 2013-08-01T21:41:13.593 回答
0

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

position:absolute; 
bottom:85%;

到 CSS，它在这里解决了你的问题

但是你必须再次放置那些div

这里：http: //jsfiddle.net/isair/mfmU7/4/

于 2013-08-01T21:44:53.380 回答