Функция rotate() - плавный поворот изображения на -45 градусов
Здравствуйте!
Помогите, пожалуйста, разобраться, как можно осуществить плавный поворот изображения на -45 градусов по истечение какого-то промежутка времени? Подробнее замысел: есть логотип. Он плавно появляется, затем с помощью функции delay() происходит задержка в 0,5 сек, далее он плавно уменьшается и перемещается в нужное мне место. С этим проблем нет. Но! Логотип - слова , они соответственно горизонтально написаны. Я бы хотел, чтобы лого сначала появлялся именно горизонтально, а потом уже после задержки в 0,5 сек плавно поворачивался на -45 градусов и вставал в нужное мне место. Читал про эту функцию, но везде написано одно и то же, что можно плавно повернуть только при помощи наведения мышкой, кликом и т.п. - т.е. что-то нужно сделать мышкой. Но этот вариант мне не подходит, а решение найти не могу. Помогите, пожалуйста, разобраться с функцией rotate(). Вот пример: http://jsfiddle.net/Jounsy/0xsLfrz5/2/ |
$("#image").animate({ "opacity": "1" }, 1000, function () { $("#image").animate({ "marginTop": "300", "width": "150" }, 500, function () { $({ deg: 0 }).animate({ deg: -45 }, { duration: 2000, step: function (now) { $("#image").css({ transform: 'rotate(' + now + 'deg)' }); } }); }); }); Замени скрипт в своей ссылке и смотри |
Объясняю как делают нормальные люди: у вас подключён скрипт
http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js Сразу переходим в репозиторий, или гуглим jQueryRotate и переходим в него по первой ссылке. Видим там заветную ссылочку Documentation. Смотрим и находим нужный пример. Вуаля. А по поводу кликов - бредни. Всё что можно сделать кликом можно сделать без клика. |
$('#image').animate({"opacity":"1"},1000).delay(500).promise().done(function() { $(this).rotate({ angle: 0, animateTo: -45, callback: function () { $(this).animate({"marginTop":"300","width":"150"},500); } }); }); tsigel, Работать не везде будет. |
Что-то я не подумал использовать jQueryRotate.js. Стыдно. :(
|
Цитата:
|
:) вариант без
Цитата:
<!DOCTYPE HTML> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> #image { opacity: 0; width: 150px; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js"></script> <script> $(function () { $('#image').animate({ "opacity": "1" }, 1000, function () { setTimeout(function () { $('#image').rotate({ angle: 0, animateTo: -45, callback: function () { $(this).animate({ "marginTop": "300", "width": "250" }, 500); } }); }, 500) }) }); </script> </head> <body> <img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" id="image"> </body> </html> |
:write: вариант с animate ...
<html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> #image { opacity: 0; width: 150px; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script> (function(e) {var a = null, d = e.fn.css; e.fn.css = function(b, i) {null===a&&(a = "undefined"!=typeof e.cssProps? e.cssProps: "undefined"!=typeof e.props? e.props: {}); if("undefined"==typeof a.transform&&("transform"==b||"object"==typeof b&&"undefined"!=typeof b.transform)) {var f = a, l; b: {l = this.get(0); for(var c =["transform", "WebkitTransform", "msTransform", "MozTransform", "OTransform"], j; j = c.shift();) {if("undefined"!=typeof l.style[j]) {l = j; break b}}l = "transform"}f.transform = l}if("transform"!=a.transform) {if("transform"==b) {if(b = a.transform, "undefined"==typeof i&&jQuery.style) {return jQuery.style(this.get(0), b)}}else {"object"==typeof b&&"undefined"!=typeof b.transform&&(b[a.transform] = b.transform, delete b.transform)}}return d.apply(this, arguments)}})(jQuery); </script> <script> (function(j) {function i(e) {var c = e.data("_ARS_data"); c||(c = {rotateUnits: "deg", scale: 1, rotate: 0}, e.data("_ARS_data", c)); return c}function d(e, c) {e.css("transform", "rotate("+c.rotate+c.rotateUnits+") scale("+c.scale+","+c.scale+")")}j.fn.rotate = function(e) {var c = j(this), f = i(c); if("undefined"==typeof e) {return f.rotate+f.rotateUnits}if(e = e.toString().match(/^(-?\d+(\.\d+)?)(.+)?$/)) {e[3]&&(f.rotateUnits = e[3]), f.rotate = e[1], d(c, f)}return this}; j.fn.scale = function(e) {var c = j(this), f = i(c); if("undefined"==typeof e) {return f.scale}f.scale = e; d(c, f); return this}; var b = j.fx.prototype.cur; j.fx.prototype.cur = function() {return"rotate"==this.prop? parseFloat(j(this.elem).rotate()): "scale"==this.prop? parseFloat(j(this.elem).scale()): b.apply(this, arguments)}; j.fx.step.rotate = function(e) {var c = i(j(e.elem)); j(e.elem).rotate(e.now+c.rotateUnits)}; j.fx.step.scale = function(c) {j(c.elem).scale(c.now)}; var a = j.fn.animate; j.fn.animate = function(e) {if("undefined"!=typeof e.rotate) {var c, f = e.rotate.toString().match(/^(([+-]=)?(-?\d+(\.\d+)?))(.+)?$/); f&&f[5]&&(c = j(this), c = i(c), c.rotateUnits = f[5]); e.rotate = f[1]}return a.apply(this, arguments)}} )(jQuery); </script> <script> $(function () { $('#image').animate({ "opacity": "1" }, 1000).delay(500).animate({ "rotate": "-45" }, 500).animate({ "marginTop": "300", "width": "250" }, 500); }); </script> </head> <body> <img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" id="image"> </body> </html> |
Ребята, спасибо всем за помощь и скорый ответ! Масса оказывается вариантов.
|
может быть уже можно делать на css анимациях?
пример с префиксами для webkit, остальные можно добавить http://jsbin.com/refidexa/1/edit |
Часовой пояс GMT +3, время: 06:57. |