Почему моя анимация jQuery не очень плавная? - PullRequest
Новая
       0

Почему моя анимация jQuery не очень плавная?

0 голосов
/ 10 ноября 2011

После задержки он просто перепрыгивает через экран к новому месту и только оживляет высоту. По какой-то странной причине это не происходит при использовании процентов, только положение в пикселях. Однако мне нужно использовать положение пикселя. Как я могу это исправить? Спасибо! 

<style>
    #Intro {
    position:relative;
    height:100%;
    width:100%;
    }

    #Picture {
    position: absolute;
    top: 30%;
    left: 33%;
    }
</style>

<script src="http://code.jquery.com/jquery-1.7.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
    $('#Picture').fadeIn(1000).delay(1500).animate({'top': '25px', 'left': '20px', 'height': '101px'},2000, 'swing');
    });
</script>


<body>

<div id="Intro">
    <img src="images/Triplid Logo.png" id="Picture" align="center"/>
</div>

</body>

Ответы [ 3 ]

1 голос
/ 10 ноября 2011

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

Здесь есть открытая ошибка с jQuery: http://bugs.jquery.com/ticket/9505

Что касается способов обойти это.Поскольку ваше изображение абсолютно позиционировано, вы можете измерить положение (вверху / слева) изображения в window.load и переключить его CSS в процентах на пиксели, используя jQuery.Затем выполните анимацию.

Пример: http://jsfiddle.net/EHAR5/

0 голосов
/ 18 июля 2016

Я столкнулся с подобной проблемой.Эффект библиотеки Animate.css не имел этой проблемы (я думаю, потому что он использует translate3d).

Версия, принятая для моих нужд: 

HTML
<h1 class="move">Some text</h1>

CSS
@keyframes slide {
    from {
    opacity: 0;
    transform: translate3d(0, -50%, 0);
    }
    to {
    opacity:1;
    transform: none;
    }
}

.slide {
  -webkit-animation-name: slide;
  animation-name: slide;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
   -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

jQuery
$(document).ready(function() {
$('.move').addClass('slide'); 
});
0 голосов
/ 10 ноября 2011

Я бы удалил delay(1500). Между затуханием и анимацией это уже занимает 3 секунды, а с задержкой - 4,5 секунды.

Я бы также рассмотрел установку position на relative: 

$('#Picture').css({ "position": "relative" });

Вот аналогичная shake функция, которую вы можете посмотреть для справки: 

jQuery.fn.shake = function() { 
    this.each(function(i) { 
        $(this).css({ "position": "relative" }); 
        for (var x = 1; x <= 3; x++) { 
            $(this).animate({ left: -25 }, 10).animate({ left: 0 }, 50).animate({ left: 25 }, 10).animate({ left: 0 }, 50); 
        } 
    }); 
    return this; 
}

Вот jsFiddle, который демонстрирует это: http://jsfiddle.net/JppPG/3/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...