Почему мой фоновый div прыгает, когда я использую высоту анимации jQuery?

ОБНОВЛЕНИЕ: воссоздал мою проблему в jsFiddle: http://jsfiddle.net/leongaban/3v8vW/3/

У меня есть 2 вкладки, нажатие на короткую должно сократить высоту фона формы, а нажатие на высокую должно увеличить высоту. Однако не должно быть никакой резкой/прерывистой анимации.

Когда вы нажимаете на вкладку, другая вкладка скрывается.

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

Если вы нажмете на вход, вы увидите анимацию. Раздел входа в систему имеет высоту 290 пикселей, а регистр — 410 пикселей.

Я получил код анимации из этого простого примера здесь.

То, что я пытаюсь сделать, это просто анимировать высоту, расширяющуюся вниз или уменьшающуюся вверх, положение и ширина должны оставаться прежними. Мне пришлось установить top и width, потому что в противном случае мой .form-background div сделал бы какое-то сумасшедшее изменение размера и не закончился бы в правильной позиции после анимации.

Вы знаете, что здесь происходит? И как бы вы его взломали? :)

введите здесь описание изображения

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


jquery css height jquery-animate
person Leon Gaban    schedule 07.06.2013    source источник
comment
я не вижу никакой анимации, хром на ubuntu   -  person dave    schedule 08.06.2013
comment
О, странно, я на OSX и работает на моем хроме, FF и сафари   -  person Leon Gaban    schedule 08.06.2013
comment
какой идентификатор входа? где вызывается функция jquery? я не вижу аниме в ff fedora!!   -  person zod    schedule 08.06.2013
comment
Использование магических чисел может сбить вас с толку позже, когда вы кроссбраузерность и тестирование обратной совместимости. В наши дни все должны пытаться использовать чувствительные единицы измерения. Кроме того, вы можете попробовать animate({"height":"auto"}) - если вы не позиционируете все абсолютно.   -  person Dom    schedule 08.06.2013

Ответы (3)


arrow_upward
1
arrow_downward

Рабочая демонстрация 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();
});
person Community    schedule 10.06.2013
comment
Спасибо, что полностью решили мою проблему! Я знал, что это моя разметка усложняет задачу. - person Leon Gaban; 10.06.2013

arrow_upward
1
arrow_downward

Пожалуйста, проверьте здесь: http://jsfiddle.net/nucky/Cu59K/

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

#form-bg {
  position:absolute; 
  top:60px;
}
person Dmitry    schedule 08.06.2013
comment
Не удалось заставить это работать, я думаю, что проблема где-то в моей разметке, с абсолютным positioniong - person Leon Gaban; 10.06.2013
comment
Я воссоздал свою проблему в jsfiddle: jsfiddle.net/leongaban/3v8vW/3 это может продемонстрировать проблема лучше - person Leon Gaban; 10.06.2013

arrow_upward
0
arrow_downward

Добавьте overflow:hidden, это также остановит прыжок, о котором вы говорите.

person Kevin Lynch    schedule 07.06.2013
comment
какой селектор я тоже добавлю? - person Leon Gaban; 08.06.2013
comment
Хм, пробовал, не сработало... возможно, мне нужно добавить еще один элемент div, чтобы скрыть анимацию. - person Leon Gaban; 10.06.2013
comment
Я воссоздал проблему в jsfiddle jsfiddle.net/leongaban/3v8vW/3. У меня 2 вкладки, 1 вкладка всегда скрыта. Это может быть причиной моей проблемы с высотой фона - person Leon Gaban; 10.06.2013