JQuery анимации или JQuery Easing? - PullRequest
Новая
       27

JQuery анимации или JQuery Easing?

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

Оставайтесь со мной на этом.Я пытаюсь имитировать переходы CSS3, и (в качестве примера) мне очень понравилось, как логотип вошел и сделал эффект "отскока" на http://metalabdesign.com

Я создал быстрый jsFiddle, как я думалэто может работать с анимациями jQuery http://jsfiddle.net/EEtVs/, но, если честно, я не уверен, что мне следует использовать jQuery Easing http://gsgd.co.uk/sandbox/jquery/easing/ будет лучшим маршрутом здесь.

Я более или менее ищудля лучшего способа обработки переходов типа easeIn с помощью jQuery.Маршрут, по которому я пошел в своей скрипке, - это то, что я должен указать не-JS версию для тех, у кого она не включена (я знаю, ВСЕ должны, просто сказать), и я хотел бы, чтобы она работала во всех браузерах (не только хорошие), именно поэтому я иду по маршруту jQuery.

Но проблема, с которой я сталкиваюсь при использовании своего пути jQuery, заключается в том, как рассчитать отрицательное верхнее позиционирование и как это может повлиять нафактический «эффект перехода».Если у кого-нибудь есть идея, как создать что-то похожее с jQuery ослаблением (или лучшим способом), я был бы очень благодарен.У меня была большая проблема, пытаясь внедрить JQuery смягчение ... так что я действительно застрял в грязи на данный момент.Спасибо!

1 Ответ

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

Я добавил плагин замедления к вашему jsfiddle, а затем добавил новый тип замедления к вашему вызову .animate(): http://jsfiddle.net/jasper/EEtVs/1/

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

Вы можете изменить тип замедления, изменив 'easeOutBounce' на любой из типов замедления на этой странице: http://gsgd.co.uk/sandbox/jquery/easing/

Если вы хотите, чтобы ваш элемент отображался в браузерах, в которых отключен JavaScript, запустите в верхней части страницы скрипт, который добавляет класс к элементу HTML, например: 

$('html').addClass('js');

Теперь выможет сделать две версии CSS для элемента, который вы перелистываете в представление: 

#heroElement {
    position:relative;
    top:0px;
}
.js #heroElement {
    position:relative;
    top:-60px;
}

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

...