Проблема с отрывистой анимацией в jQuery - PullRequest
Новая
       22

Проблема с отрывистой анимацией в jQuery

6 голосов
/ 20 марта 2011

Я делал это несколько раз без проблем, но по какой-то причине это проблема на Здесь . Скольжение вниз начнет работать (1/3) в обычном режиме, а затем внезапно дергается и заканчивает анимацию. скольжение работает нормально. это случай для slideDown (), slideToggle и .animate () странно, если я также переключаю непрозрачность в функции анимации, она не дергается, но мой текст ненадолго изменит цвет.

HTML: 

<h2>Phthalate Free: </h2><div class="yamikowebsToggler">
    <p>
    Dibutyl Phthalate is linked to cancer and is present in nail polish, perfume, soft plastics and skin care products.
    </p></div>

CSS: я читал еще, что поля могут вызвать рывки, но это не помогает 

    h2{color:#76DEFC; margin:0px;}
    .yamikowebsToggler{margin:0px;}
    p{margin:0px; color;#000000;}

Jquery: 

$(document).ready(function(){
    $(".yamikowebsToggler").fadeOut(0);
    $("h2").click(function()
    {
        $(this).next(".yamikowebsToggler").stop(true, true).animate(
        { height: 'toggle' }, 
        {
            duration: 1000,
        });
    })
});

Ответы [ 4 ]

4 голосов
/ 21 марта 2011

Я нашел решение. это не имеет ничего общего с моим кодом, но ошибка в jquery. jquery не может получить высоту, если он наследуется, потому что когда он получает высоту, элемент скрыт. когда элементы скрыты, они обрабатываются css свойствами 

position: absolute;
visibility: hidden;

, чтобы исправить это, вам нужно указать высоту в анимации, что в моем случае невозможно, так как у меня есть много переключателей. альтернатива - установить высоту для элементов. я лично добавил примечание в моем jQuery об этом и сделал все это, просто добавив 

style="height: <height in px>;"

к переключаемым элементам.

1 голос
/ 18 мая 2012

У меня была похожая проблема при анимации деления от 100% до 0% ширины.

То, что происходило, состояло в том, что в начале анимации деление стало по какой-то причине более 110%.

В любом случае я обнаружил, что решение было добавить max-width: 100%; в стилях CSS для конкретного подразделения.

Просто подумал, что я опубликую это здесь, когда пришел сюда в поисках исправлениявопрос.:)

0 голосов
/ 05 октября 2011

Я знаю, что это помечено как ответ, но я хотел бы предоставить обновление по этому вопросу.

Соответствующий тикет здесь: http://bugs.jquery.com/ticket/4541

Однако он был закрыт ядромdevs, и кажется, что он не будет исправлен, если не будет патча, у которого нет недостатков в производительности.

В то же время, если вы все еще хотите использовать jQuery для этого, вы можете либо установить высоту, либоширина элемента, который вы пытаетесь использовать slideUp или slideDown.Оно не обязательно должно быть в пиксельных единицах, оно также может быть в процентах.

0 голосов
/ 20 марта 2011

Вы пытались увеличить {duration: ...}? Также вы можете просто использовать встроенную функцию jQuery .slideToggle () .

...