Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.08.2014, 12:58
Новичок на форуме
Отправить личное сообщение для Jounsy Посмотреть профиль Найти все сообщения от Jounsy
 
Регистрация: 07.08.2014
Сообщений: 2

Функция rotate() - плавный поворот изображения на -45 градусов
Здравствуйте!
Помогите, пожалуйста, разобраться, как можно осуществить плавный поворот изображения на -45 градусов по истечение какого-то промежутка времени?

Подробнее замысел: есть логотип. Он плавно появляется, затем с помощью функции delay() происходит задержка в 0,5 сек, далее он плавно уменьшается и перемещается в нужное мне место. С этим проблем нет.
Но! Логотип - слова , они соответственно горизонтально написаны.
Я бы хотел, чтобы лого сначала появлялся именно горизонтально, а потом уже после задержки в 0,5 сек плавно поворачивался на -45 градусов и вставал в нужное мне место.

Читал про эту функцию, но везде написано одно и то же, что можно плавно повернуть только при помощи наведения мышкой, кликом и т.п. - т.е. что-то нужно сделать мышкой. Но этот вариант мне не подходит, а решение найти не могу.

Помогите, пожалуйста, разобраться с функцией rotate().

Вот пример: http://jsfiddle.net/Jounsy/0xsLfrz5/2/
Ответить с цитированием
  #2 (permalink)  
Старый 07.08.2014, 13:24
Профессор
Отправить личное сообщение для tsigel Посмотреть профиль Найти все сообщения от tsigel
 
Регистрация: 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)'
                });
            }
        });
    });
});


Замени скрипт в своей ссылке и смотри
Ответить с цитированием
  #3 (permalink)  
Старый 07.08.2014, 13:32
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,587

Объясняю как делают нормальные люди: у вас подключён скрипт
http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js

Сразу переходим в репозиторий, или гуглим jQueryRotate и переходим в него по первой ссылке.
Видим там заветную ссылочку Documentation.
Смотрим и находим нужный пример.
Вуаля.

А по поводу кликов - бредни. Всё что можно сделать кликом можно сделать без клика.
__________________
29375, 35
Ответить с цитированием
  #4 (permalink)  
Старый 07.08.2014, 13:45
Профессор
Отправить личное сообщение для WorM32 Посмотреть профиль Найти все сообщения от WorM32
 
Регистрация: 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.
Ответить с цитированием
  #5 (permalink)  
Старый 07.08.2014, 13:49
Профессор
Отправить личное сообщение для tsigel Посмотреть профиль Найти все сообщения от tsigel
 
Регистрация: 12.12.2012
Сообщений: 1,398

Что-то я не подумал использовать jQueryRotate.js. Стыдно.
Ответить с цитированием
  #6 (permalink)  
Старый 07.08.2014, 13:54
Профессор
Отправить личное сообщение для WorM32 Посмотреть профиль Найти все сообщения от WorM32
 
Регистрация: 11.02.2014
Сообщений: 303

Сообщение от tsigel Посмотреть сообщение
Что-то я не подумал использовать jQueryRotate.js. Стыдно.
Нормально. Я бы сам без него написал, если ТС бы его не юзал изначально.
Ответить с цитированием
  #7 (permalink)  
Старый 07.08.2014, 14:34
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,112

вариант без
Сообщение от 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>
Ответить с цитированием
  #8 (permalink)  
Старый 07.08.2014, 14:35
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,112

вариант с 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>
Ответить с цитированием
  #9 (permalink)  
Старый 07.08.2014, 14:49
Новичок на форуме
Отправить личное сообщение для Jounsy Посмотреть профиль Найти все сообщения от Jounsy
 
Регистрация: 07.08.2014
Сообщений: 2

Ребята, спасибо всем за помощь и скорый ответ! Масса оказывается вариантов.
Ответить с цитированием
  #10 (permalink)  
Старый 07.08.2014, 19:07
Лаборант :-)
Отправить личное сообщение для Pavel M. Посмотреть профиль Найти все сообщения от Pavel M.
 
Регистрация: 08.11.2011
Сообщений: 806

может быть уже можно делать на css анимациях?

пример с префиксами для webkit, остальные можно добавить
http://jsbin.com/refidexa/1/edit
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Поворот изображения в fabric.js Zzepish Библиотеки/Тулкиты/Фреймворки 0 28.09.2013 15:50
HTML5 Canvas. Поворот изображения Valdemor Элементы интерфейса 3 29.04.2013 18:12
плавный поворот изображения vvsh Элементы интерфейса 5 21.04.2012 22:55
Поворот изображения в браузере Владимир Седов Элементы интерфейса 1 15.03.2011 00:10
Поворот изображения Titanic jQuery 1 12.03.2011 17:37