Animate css and jquery

jquery animate .css

Just use .animate() instead of .css() (with a duration if you want), like this:

$('#hfont1').hover(function() < $(this).animate(, 1000); >, function() < $(this).animate(, 1000); >); 

You can test it here. Note though, you need either the jQuery color plugin, or jQuery UI included to animate the color. In the above, the duration is 1000ms, you can change it, or just leave it off for the default 400ms duration.

It would be cool if SO had realtime answer monitoring to watch people type, but it would be a huge resource hog 😉

You could also use .filter(‘:not(:animated)’) to check that the animation has finished running before executing again. A nice example can be found here: css-tricks.com/examples/jQueryStop

You might also want to include a .stop() before the animate part, else you get a long durating flangy effect when moving your mouse accross the element fast a couple of times. Here is the fiddle with that added jsfiddle.net/GELTP/1586

You could opt for a pure CSS solution:

. forgot to add the delay at the end, e.g. ‘transition: color 1s ease-in-out 2s;’, adding a 2 second delay to the animation.

The example from jQuery’s website animates size AND font but you could easily modify it to fit your needs

You can actually still use «.css» and apply css transitions to the div being affected. So continue using «.css» and add the below styles to your stylesheet for «#hfont1». Since «.css» allows for a lot more properties than «.animate», this is always my preferred method.

If you are needing to use CSS with the jQuery .animate() function, you can use set the duration.

We have the duration property set to 6000.

This will set the time in thousandth of seconds: 6 seconds.

After the duration our next property «easing» changes how our CSS happens.

We have our positioning set to absolute.

There are two default ones to the absolute function: ‘linear’ and ‘swing’.

In this example I am using linear.

It allows for it to use a even pace.

The other ‘swing’ allows for a exponential speed increase.

There are a bunch of really cool properties to use with animate like bounce, etc.

$(document).ready(function()< $("#my_image").css(< 'height': '100px', 'width':'100px', 'background-color':'#0000EE', 'position':'absolute' >);// property than value $("#my_image").animate(< 'left':'1000px' >,6000, 'linear', function()< alert("Done Animating"); >); >); 

Источник

How do we add css + animation in jquery?

and it works. However, in WebKit, on hover, it gets bigger slowly, unlike in Firefox, or IE where the images grow big instantly. It would be nicer if we could have something like:

How can we add transition effects or to scale not just for Webkit, but for IE, Firefox, etc. Update: I received a great sample on how to do something like this from a good guy in jQuery IRC.

var rmatrix = /matrix\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\)/; jQuery.support.scaleTransformProp = (function() < var div = document.createElement('div'); return div.style.MozTransform === '' ? 'MozTransform' : div.style.WebkitTransform === '' ? 'WebkitTransform' : div.style.OTransform === '' ? 'OTransform' : div.style.MsTransform === '' ? 'MsTransform' : false; >)(); if (jQuery.support.scaleTransformProp) < jQuery.cssHooks['scale'] = < get: function(elem, computed, extra) < var transform = jQuery.curCSS(elem, jQuery.support.scaleTransformProp), m = transform.match(rmatrix); return m && parseFloat(m[1]) || 1.0; >, set: function(elem, val) < var transform = jQuery.curCSS(elem, jQuery.support.scaleTransformProp); if (transform.match(rmatrix)) < elem.style[jQuery.support.scaleTransformProp]= transform.replace(rmatrix, function(m, $1, $2, $3, $4, $5, $6) < return 'matrix(' + [val, $2, $3, val, $5, $6].join(',') + ')'; >); > else < elem.style[jQuery.support.scaleTransformProp]= 'scale(' + val + ')'; >> >; jQuery.fx.step.scale = function(fx) < jQuery.cssHooks['scale'].set(fx.elem, fx.now) >; > /*SEMENTARA*/ $('#why-red a').hover(function() < $(this).animate(< 'scale' : 1.1 >, 200); >, function() < $(this).animate(< 'scale': 1 >, 200); >); 

Источник

.animate()

.animate( properties [, duration ] [, easing ] [, complete ] ) Возвращает: jQuery

Описание: Выполняет произвольную анимацию набора CSS свойств.

Добавлен в версии: 1.0 .animate( properties [, duration ] [, easing ] [, complete ] )

Добавлен в версии: 1.0 .animate( properties, options )

Булевый флаг, означающий следует ли поместить анимацию в очередь выполняемых эффектов. Если значение false , то анимация запустится немедленно. Начиная с jQuery 1.7, опция queue может также принимать строку, в этом случае анимация будет добавлена в очередь представленная этой строкой. Когда используется произвольное имя в очереди — анимация не запускается автоматически, Вы должны вызвать метод .dequeue(«queuename») для ее запуска.

Объект содержащий один или несколько CSS свойств и определяющий соотвествующую функцию анимации для конкретного CSS свойства. (Добавлен в версии: 1.4)

Функция, которая вызывается для каждого анимированного свойства каждого анимационного элемента. Эта функция дает возможность изменять объект Tween, чтобы изменить значение свойства, прежде чем оно установлено.

Функция, которая вызывается после каждого шага анимации, только один раз для анимационного элемента, независимо от количества анимированных свойств. (Добавлен в версии: 1.8)

Функция, которая вызывается в любом случае — либо при завершении анимации, либо при ее отмене без выполенения. (Добавлен в версии: 1.8)

Метод .animate() позволяет создать эффект анимации на любое числовое CSS свойство элемента. Единственным необходимым параметром является объект с CSS свойствами. Этот объект похож на тот что передается в метод .css() , за исключением того, что диапазон свойств более ограничен.

Анимационные свойства и значения

Все анимационные свойства должны быть анимированы при помощи единичного числового значения, за исключением случаев указанных ниже; большинство не числовых свойств не могут быть анимированы при помощи базового функционала jQuery (Например width , height или left могут быть анимированы, но background-color не может, за исключением использования плагина jQuery.Color). Значения свойств рассматриваются как количество пикселей, если не указано иное. Единицы измерения em и % могут быть указаны, там где это применимо.

В дополнение к свойствам стиля, некоторые не стилевые свойстваs, такие как scrollTop и scrollLeft , а также пользовательские свойства, могут быть анимированы.

Сокращенные CSS свойства (такие как font, background, border) не полностью поддерживаются. Например, если Вы хотите анимировать ширину границ, то стиль и изначальная ширина границы должны быть заданы заранее. Или, если Вы хотите анимировать размер шрифта, Вы должны использовать fontSize или CSS эквивалент ‘font-size’ а не просто ‘font’ .

В дополнение к числовым значениям, каждое свойство может принять строку: ‘show’ , ‘hide’ или ‘toggle’ . Эти сокращения позволяют произвольную анимацию скрытия или отображения, которая учитывает тип отображения элемента. Для того чтобы использовать встроенное отслеживание состояния отображения свойства, строка ‘toggle’ должна быть задана в качестве значения анимируемого CSS свойства.

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

Важно: В отличие от сокращенных методов анимации, таких как .slideDown() и .fadeIn() , метод .animate() не делает скрытие элемента как часть эффекта. Например, в случае $( «someElement» ).hide().animate(, 500) , анимация будет запущена, но элемент будет оставаться скрытым.

Длительность

Длительность задается в милисекундах. Более высокие значения означает более медленную анимацию, а не быструю. Значение по умолчанию 400 милисекунд. Строки ‘fast’ и ‘slow’ могут быть использованы для указания длительности 200 и 600 милисекунд соответственно.

Функции обратного вызова

Если заданы start , step , progress , complete , done , fail и always функции обратного вызова, то они будут вызваны для каждого анимируемого элемента; this в этих функциях будет указывать на анимируемый DOM-элемент. Если в выборке нет элементов, то функции обратного вызова не будут выполняться. Если анимируются несколько элементов, то обратный вызов выполняется один раз для каждого элемента, а не один раз для анимации в целом. Используйте метод .promise() для получения объекта Promise и прикрепления функций обратных вызовов.

Базовое использование

Анимация любого элемента, например простое изображение:

div id="clickme">
 Нажмите здесь
 div>
img id="book" src="book.png" alt="" width="100" height="123"
 style="position: relative; left: 10px;">

Для одновременной анимации прозрачности, отступа слева и высоты картинки:

$( "#clickme" ).click(function() 
 $( "#book" ).animate(
 opacity: 0.25,
 left: "+=50",
 height: "toggle"
 >, 5000, function() 
 // Animation complete.
 >);
>);

$( "li" ).animate(
 opacity: .5,
 height: "50%"
>, 
 step: function( now, fx ) 
 var data = fx.elem.id + " " + fx.prop + ": " + now;
 $( "body" ).append( "
" + data + "
" );
 >
>);