07.08.2014, 12:58
|
|
Новичок на форуме
|
|
Регистрация: 07.08.2014
Сообщений: 2
|
|
|
Функция rotate() - плавный поворот изображения на -45 градусов
Здравствуйте!
Помогите, пожалуйста, разобраться, как можно осуществить плавный поворот изображения на -45 градусов по истечение какого-то промежутка времени?
Подробнее замысел: есть логотип. Он плавно появляется, затем с помощью функции delay() происходит задержка в 0,5 сек, далее он плавно уменьшается и перемещается в нужное мне место. С этим проблем нет.
Но! Логотип - слова , они соответственно горизонтально написаны.
Я бы хотел, чтобы лого сначала появлялся именно горизонтально, а потом уже после задержки в 0,5 сек плавно поворачивался на -45 градусов и вставал в нужное мне место.
Читал про эту функцию, но везде написано одно и то же, что можно плавно повернуть только при помощи наведения мышкой, кликом и т.п. - т.е. что-то нужно сделать мышкой. Но этот вариант мне не подходит, а решение найти не могу.
Помогите, пожалуйста, разобраться с функцией rotate().
Вот пример: http://jsfiddle.net/Jounsy/0xsLfrz5/2/ |
|
07.08.2014, 13:24
|
|
Профессор
|
|
Регистрация: 12.12.2012
Сообщений: 1,398
|
|
$("#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)'
});
}
});
});
});
Замени скрипт в своей ссылке и смотри |
|
07.08.2014, 13:32
|
 |
Тлен
|
|
Регистрация: 02.01.2010
Сообщений: 6,577
|
|
Объясняю как делают нормальные люди: у вас подключён скрипт
http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js
Сразу переходим в репозиторий, или гуглим jQueryRotate и переходим в него по первой ссылке.
Видим там заветную ссылочку Documentation.
Смотрим и находим нужный пример.
Вуаля.
А по поводу кликов - бредни. Всё что можно сделать кликом можно сделать без клика.
__________________
29375, 35
|
|
07.08.2014, 13:45
|
|
Профессор
|
|
Регистрация: 11.02.2014
Сообщений: 303
|
|
$('#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,
Работать не везде будет.
Последний раз редактировалось WorM32, 07.08.2014 в 13:50.
|
|
07.08.2014, 13:49
|
|
Профессор
|
|
Регистрация: 12.12.2012
Сообщений: 1,398
|
|
Что-то я не подумал использовать jQueryRotate.js. Стыдно.  |
|
07.08.2014, 13:54
|
|
Профессор
|
|
Регистрация: 11.02.2014
Сообщений: 303
|
|
Сообщение от tsigel
|
|
Что-то я не подумал использовать jQueryRotate.js. Стыдно.
|
Нормально. Я бы сам без него написал, если ТС бы его не юзал изначально. |
|
07.08.2014, 14:34
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,105
|
|
 вариант без
|
Сообщение от WorM32
|
|
delay(500).promise().done
|
<!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>
|
|
07.08.2014, 14:35
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,105
|
|
 вариант с 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>
|
|
07.08.2014, 14:49
|
|
Новичок на форуме
|
|
Регистрация: 07.08.2014
Сообщений: 2
|
|
|
Ребята, спасибо всем за помощь и скорый ответ! Масса оказывается вариантов.
|
|
07.08.2014, 19:07
|
|
Лаборант :-)
|
|
Регистрация: 08.11.2011
Сообщений: 806
|
|
может быть уже можно делать на css анимациях?
пример с префиксами для webkit, остальные можно добавить
http://jsbin.com/refidexa/1/edit |
|
|
|
