1

UPDATE: Recreated my problem in jsFiddle: http://jsfiddle.net/leongaban/3v8vW/3/

I have 2 tabs, clicking on short should shorten the height of the form-background, and clicking on tall should increase the height. However there should not be any jarring / 'skippy' animation going on like so.

When you click on a tab, the other tab is hidden.

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

If you click on login you will see the animation happen. The login div has a height of 290px and register is 410px.

I got the animate code from this simple example here.

What I'm trying to do is just animate the height extending down or shrinking up, the position and width should stay the same. I had to set top and width because otherwise my .form-background div would do some crazy resizing and not end at the correct position after the animation.

Do you know what is going on here? And how would you go about hacking it? :)

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

4

3 回答 3

1

请在此处查看：http: //jsfiddle.net/nucky/Cu59K/ 

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

#form-bg {
  position:absolute; 
  top:60px;
}
于 2013-06-08T00:06:23.097 回答
1

工作 jsFiddle 演示

把你的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();
});
于 2013-06-10T15:29:27.263 回答
0

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

于 2013-06-07T22:41:43.680 回答