Почему моя анимация jQuery не очень гладкая?

#jquery #html #animation

#jquery #HTML #Анимация

Вопрос:

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

 <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>

1. является ли #Picture элементом img? Было бы полезно немного HTML, чтобы пользователи могли поиграть с этим с jsfiddle.net

2. Если #Picture — это изображение, и это изображение ДЕЙСТВИТЕЛЬНО БОЛЬШОЕ, то это может быть проблемой. Кроме того, если #Intro также является картинкой, или видео, или даже сложным HTML, это также может быть проблемой. Или и то, и другое. Нужна дополнительная информация, которая поможет вам лучше.

3. Ок, да, картинка — это элемент img. Вступление — это просто держатель. По сути, это просто классная страница приветствия, которую я пытаюсь создать, так что HTML не слишком много, но я добавил тело.

4. Я попытался сделать это с изображением небольшого размера, и произошло то же самое.

Ответ №1:

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

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

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

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

Ответ №2:

Я столкнулся с похожей проблемой. У эффекта библиотеки 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'); 
});

Ответ №3:

Я бы удалил 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 /