Pull to refresh

Анимация в Internet Explorer

jQuery *
Не первый раз сталкиваюсь с этой проблемой, но обычно выручали различные «костыли». Сейчас решил разобраться. Суть в следующем: если в анимации начальное и конечное значение в процентах и разных знаков, объект будет «дёргаться».

Пример:
<style type="text/css">
 #div-1 { position: absolute; width: 100px; height: 100px; background: grey; border: 1px solid black; top: 50%; margin-left: 50%; }
</style>

<script type="text/javascript">
 $(function(){
  $('#link-1').click(function(e){
   e.preventDefault();
   $('#div-1').animate({ left: '25%' });
  });
  $('#link-2').click(function(e){
   e.preventDefault();
   $('#div-1').animate({ left: '-25%' });
  });
 });
</script>

<div id="div-1" style="left: -25%;"></div>
<a href="#" id="link-1">Animate to 25%</a>
<a href="#" id="link-2">Animate to -25%</a>

Читать дальше →
Total votes 50: ↑46 and ↓4 +42
Views 4K
Comments 25

Разбираемся с анимацией в jQuery

jQuery *
imageЗдравствуйте. Сегодняшний топик я хотел написать о том, что механизм анимации в jQuery не эффективен, создает кучу таймеров, каждый из которых работает по отдельности, что приводит к чрезмерно частой перерисовки контента и сильно тормозит браузер, и хотел описать некоторые приемы написания «правильной анимации». В ходе подготовки примеров я понял, что я ошибался. Механизм анимации jQuery действительно не эффективен, создает кучу проблем, но причины этих проблем вовсе не в создании большого количества таймеров, а в нечте совсем другом, и, кажется, я добился замечательных результатов в устранении этих проблем.
Читать дальше →
Total votes 166: ↑160 and ↓6 +154
Views 31K
Comments 35

Firefox BUG: -moz-border-radius + $.animate = визуальные артефакты

Lumber room
Наткнулся на «интересный» баг в ФФ при изменении размеров элемента, у которого определенно свойство -moz-border-radius.

Анимационное изменение размеров сопровождается визуальными артефактами.


Читать дальше →
Total votes 15: ↑9 and ↓6 +3
Views 295
Comments 3

CSS3 сейчас — анимация, прозрачность и многое другое (часть 2)

CSS *
Продолжая цикл статей «CSS3 сейчас!» (Первая статья — CSS Transitions), хотелось бы рассказать об анимации средствами CSS3, а конкретно — @keyframe и animate. Так же, в статье мы затронем свойства opacity и цветовую модель rgba(), кроссбраузерное использование border-radius, box-shadow и градиентов.

Читать дальше →
Total votes 61: ↑56 and ↓5 +51
Views 46K
Comments 41

Smooth.js — jQuery-плагин для CSS3-transitions с даунгрейдом до $.animate

JavaScript *
CSS3-транзишены — чертовски полезная штука. По сравнению с javascript-анимацией они:
  1. Обеспечивают более плавные переходы;
  2. Потребляют меньше ресурсов;
  3. Открывают новые возможности. Например, автоматическую обработку матричных преобразований (CSS-transforms);

Конечно, наш с вами любимый IE их не поддерживает даже в 9 версии.
Читать дальше →
Total votes 29: ↑26 and ↓3 +23
Views 17K
Comments 14