Question

更新：在jsFiddle中重新创建我的问题： http://jsfiddle.net/leongaban/3v8vW/3/

我有2个标签，点击短标签可以缩短表格背景的高度，点击高标准可以增加高度。然而，不应该有任何刺耳的/'滑雪'动画像这样。

单击选项卡时，将隐藏另一个选项卡。

Codepen：http://codepen.io/leongaban/pen/wipba

如果您点击登录，您将看到动画发生。登录div的高度为290px，寄存器为410px。

我从此simple example here获得了动画代码。

我想要做的只是为向下延伸或收缩的高度设置动画，位置和宽度应保持不变。我必须设置top和width，否则我的.form-background div会做一些疯狂的调整，而不是在动画后的正确位置结束。

你知道这里发生了什么吗？你会怎么做黑客攻击呢？：）

enter image description here

的jQuery

    // tabs
    $('#login-form #tab-register').click(function() {

        $('#login-form').fadeToggle();
        $(".form-background").animate(
            {
                "top": "-342px",
                "width": "400px",
                "height": "410px"
            },
            "slow", function(){
                $('#register-form').fadeToggle();
            });
    });

    $('#register-form #tab-login').click(function() {

        $('#register-form').fadeToggle();
        $(".form-background").animate(
            {
                "top": "-214px",
                "width": "400px",
                "height": "290px"
            },
            "slow", function(){
                $('#login-form').fadeToggle();
            });
    });

CSS

.container .login-container .login-box .form-background {
  position: relative;
  top: -342px;
  height: 410px;
  background: white;
  -webkit-box-shadow: 0px 5px 15px rgba(50, 50, 50, 0.2);
  -moz-box-shadow: 0px 5px 15px rgba(50, 50, 50, 0.2);
  box-shadow: 0px 5px 15px rgba(50, 50, 50, 0.2);
  z-index: -1;
}

Codepen：http://codepen.io/leongaban/pen/wipba

Answer 1

请点击此处：http://jsfiddle.net/nucky/Cu59K/

.topbar { 
  position: absolute; 
  top:0;
}

#form-bg {
  position:absolute; 
  top:60px;
}

Answer 2

<强> Working jsFiddle Demo

将tabs放在外面。没有必要为每个标签内容重复它：

<div class="container">
    <div class='topbar'>
        <ul>
            <li class="short btn-off">Short</li>
            <li class="tall btn-off">Tall</li>
        </ul>
    </div>

    <div class="tall-content">
        <div>
            Tall Content
        </div>  
    </div>

    <div class="short-content">
        <div>
            Short Content
        </div> 
    </div>

    <div id='form-bg'></div>
</div>

我也覆盖了你的动画算法，先隐藏另一个，没有动画，然后用淡化动画显示当前的那个：

$(".short").click(function(){
    $('.tall-content').hide();
    $("#form-bg").animate({height:100},200);
    $('.short-content').fadeIn();
});

$(".tall").click(function(){
    $('.short-content').hide();
    $("#form-bg").animate({height:200},200);
    $('.tall-content').fadeIn();
});

Answer 3

添加overflow:hidden这将停止你所指的跳跃

当我使用jQuery动画高度时，为什么我的背景div会跳跃？

3 个答案: