
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)" }); }); }
Похожие записи
22:37:03 14.09.2012
Mariya
Интересный эффект с применением CSS transform - http://lecaw.ru/index.php/css/item/294-effekt-vrasheniya-kuba