jQuery.animate и css transform

jQuery.animate и css transform

Задача: при наведении мышкой на картинку анимировать ее, чтобы увеличивался масштаб, или, чтобы она поворачивалась.

Для этого надо скачать два патча для jQuery v.1.4.3
первый - https://github.com/zachstronaut/jquery-animate-css-rotate-scale/
второй - https://github.com/zachstronaut/jquery-css-transform/
Приделать их в head:

    <script src="/js/modernizr-1.6.min.js"></script>
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/jquery/jquery-css-transform.js" type="text/javascript"></script>
    <script src="/js/jquery/jquery-animate-css-rotate-scale.js" type="text/javascript"></script>   

и можно анимировать:

    $("#anim").animate({rotate: "5deg"}, 500); //поворачивать полсекунды на 5 градусов
    $("#anim").animate({scale: "1.05"}, 500); //чуть-чуть увеличивать полсекунды

Пример:

 
    //стрелочки щевеляться
	if (Modernizr.csstransforms) {
		$(".workflow li.arrow1, .workflow li.arrow3, .workflow li.arrow5").hover(function(){
			$(this).animate({
					rotate: "5deg",
				}, 600).animate({
					rotate: "-5deg",
				}, 700);
			}, function(){
				$(this).css({
					transform: "rotate(0deg)",
					"-moz-transform": "rotate(0deg)",
					"-webkit-transform": "rotate(0deg)"
				});
			});
			$(".workflow li.arrow2, .workflow li.arrow4").hover(function(){
				$(this).animate({
					scale: "1.05",
				}, 600).animate({
					scale: "0.95",
				}, 700);
			}, function(){
				$(this).css({
					transform: "scale(1)",
					"-moz-transform": "scale(1)",
					"-webkit-transform": "scale(1)"
				});
			});
		}

Похожие записи

• Работа с массивами в jquery
• Рисование на canvas'е
• HTML5 CSS3 таблица с закругленными краями
• Проверка поддержки элементов html5 в браузере