Мой div корректно отображается с помощью show (), но затем он выпрыгивает после завершения анимации - PullRequest
Новая
       12

Мой div корректно отображается с помощью show (), но затем он выпрыгивает после завершения анимации

2 голосов
/ 11 сентября 2011

Я использую jQuery для анимации постепенного перехода для элемента

, который у меня есть.Это код: 
$(document).ready(function() {
    ...
    function calculate() {
        ...
        if ($("#results").css('display') === 'none') {
            console.log("fadein");
            $("#results").show("normal", function() {
                console.log("animation complete");
            });
        }
        ...
    }
}

Вот элемент

, в который я добавляю: 
<div id="results">
    <p>Input equation: <span id="eq" class="result"></span></p>
    <p>Roots: <span id="root1" class="result"></span>, <span id="root2" class="result"></span></p>
</div>

Эффект затухания работает отлично.Однако, как только анимация завершится, элемент внезапно подпрыгнет примерно на 20 пикселей вверх по странице.(Я мог бы также сказать, что анимация помещает элемент примерно на 20 пикселей ниже его предполагаемого местоположения, а затем перепрыгивает элемент на 20 пикселей после завершения.) Как я могу это исправить?

(я должен упомянуть, что это прыжокошибка возникает как в Chrome, так и в Firefox)

Редактировать:

У меня не так много таблиц стилей, но вот она: 

<style type="text/css">
    .result {
        color: blue;
    }
    #results {
        display: none;
    }
    input[type="text"] {
        width:50px;
    }
</style>

Если этоВ любом случае, вот весь текст моего документа, поскольку он достаточно короткий. 

<body>
    <p><input type="text" maxlength="10" id="input_a" class="variable"/>x^2 +
        <input type="text" maxlength="10" id="input_b" class="variable"/>x +
        <input type="text" maxlength="10" id="input_c" class="variable"/> = 0</p>

    <p><button type="submit" disabled="disabled">Calculate</button>
        <button type="reset">Clear</button></p>

    <div id="results">
        <p>Input equation: <span id="eq" class="result"></span></p>
        <p>Roots: <span id="root1" class="result"></span>, <span id="root2" class="result"></span></p>
    </div>
</body>

Редактировать 2: Вот весь код, поскольку он не слишком длинный: http://pastebin.com/kfjpkSBr

1 Ответ

0 голосов
/ 11 сентября 2011

В соответствии с обсуждением, следующим за исходным сообщением, было установлено поле по умолчанию и отступы для элементов p, чтобы вызвать скачок анимации.

Простое удаление полей и отступов из расположенных элементов pвнутри анимированного results элемента решена проблема.Вероятно, это связано с ошибкой в ​​логике анимации в jQuery, которая вычисляет окончательные требуемые размеры анимируемых элементов.

РЕДАКТИРОВАТЬ: Кроме того, просто чтобы отметить это, многие проблемы с анимацией на основе JS могутбыть решена путем предоставления анимированным элементам определенных размеров с помощью width и height свойств CSS.В зависимости от конкретной используемой анимации (jQuery) и элемента, к которому она применяется, значения полей и / или отступов могут быть смещены в элементы распорки для поддержания согласованных переходов.

...