JQuery оживить вращающийся div

Question

Я бы хотел повернуть div в функции анимации, такой как

 $('div').animate({rotate: '30deg'},1000);

Я нашел это:

http://www.zachstronaut.com/posts/2009/08/07/jquery-animate-css-rotate-scale.html

Но я хочу знатьесли есть более официальный способ сделать это или, по крайней мере, другой способ.

Спасибо

Answer 1

Если вы открыты для использования CSS3 в сочетании с jQuery, возможно, этот метод вам пригодится:

HTML

<div id="click-me">Rotate</div>

<div id="rotate-box"></div>

CSS

#rotate-box{

   width:50px;
   height:50px;
   background:#222222;

}

@-moz-keyframes rotatebox /*--for firefox--*/{

    from{
        -moz-transform:rotate(0deg);
    }       
    to{
        -moz-transform:rotate(360deg);
    }                       

}

@-webkit-keyframes rotatebox /*--for webkit--*/{

    from{
        -webkit-transform:rotate(0deg);
    }       
    to{
        -webkit-transform:rotate(360deg);
    }                       

}

#click-me{
   font-size:12px;
   cursor:pointer;
   padding:5px;
   background:#888888;
}

И если предположить, что рассматриваемый элемент должен вращаться при нажатии на ссылку / div / button, ваш jQuery будет выглядеть примерно так:

JQuery

$(document).ready(function(){
    $('#click-me').click(function(){
        $('#rotate-box').css({

        //for firefox
        "-moz-animation-name":"rotatebox",
        "-moz-animation-duration":"0.8s",
        "-moz-animation-iteration-count":"1",
            "-moz-animation-fill-mode":"forwards",

        //for safari & chrome
        "-webkit-animation-name":"rotatebox",
        "-webkit-animation-duration":"0.8s",
        "-webkit-animation-iteration-count":"1",
        "-webkit-animation-fill-mode" : "forwards",

        });
    });
});

Так как jQuery еще не может поддерживать rotate (deg) в .animate (), я немного обманул, предварительно определив ключевые кадры анимации в CSS3 и присвоив метку или идентификатор этой конкретной анимации. В этом примере эта метка / идентификатор определяется как rotatebox .

С этого момента происходит то, что в тот момент, когда на кликаемом элементе div нажимается, фрагмент jQuery будет использовать .css () и назначать необходимые свойства вращаемому элементу. В тот момент, когда эти свойства назначены, между элементом и ключевыми кадрами анимации CSS3 появится мост, что позволит выполнить анимацию. Вы также можете контролировать скорость анимации, изменяя свойство animation-duration.

Лично я считаю, что этот метод необходим только в том случае, если для активации поворота требуются события прокрутки мыши или мыши. Если предполагается, что поворот выполняется сразу после загрузки документа, тогда достаточно использовать только CSS3. То же самое относится к случаю, когда событие hover должно активировать вращение - вы просто определяете свойства анимации CSS3, которые связывают элемент с вращающейся анимацией в псевдоклассах элемента.

Мой метод здесь просто основан на предположении, что для активации поворота требуется событие click или что JQuery каким-то образом необходим для участия в этом. Я понимаю, что этот метод довольно утомителен, поэтому, если у кого-то есть вклад, не стесняйтесь предлагать. Также обратите внимание, что поскольку этот метод использует CSS3, он не будет работать должным образом в IE8 и ниже.

Answer 2

Самое простое, что я чувствую, это пример на jsfiddle

$(function() {
    var $elie = $("img"), degree = 0, timer;
    rotate();
    function rotate() {

        $elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)'});  
        $elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)'});
        $elie.css('transform','rotate('+degree+'deg)');                      
        timer = setTimeout(function() {
            ++degree; rotate();
        },5);
    }

    $("input").toggle(function() {
        clearTimeout(timer);
    }, function() {
        rotate();
    });
}); 

http://jsfiddle.net/eaQRx/

Answer 3

QTransform позволяет вращать, наклонять, масштабировать и переводить, и работает в разных браузерах.

Загрузите и включите QTransform.js в ваш html.

<script src="js/qTransform.js"></script>

Укажите фиксированную высоту-ширину для вашего div и добавьте следующий скрипт:

$('#box4').delay(300).animate({rotate: '20deg'}, 500);
$('#box5').delay(700).animate({rotate: '50deg'}, 500);
$('#box6').delay(1200).animate({rotate: '80deg'}, 500);

где (box4, box5 и box6 - мои идентификаторы div).

delay(300), delay(700) & delay(1200) запускает анимацию через 300, 500 и 1200 миллисекунд. А 500 в конце - это продолжительность анимации.

Если вы хотите указать угол поворота вручную, вы можете сделать это так:

Взять угол в переменной. например

var degAngle = 60;

и добавьте его в скрипт как

$('#box4').delay(300).animate({rotate: degAngle+'deg'}, 500);

Вы также можете предоставить несколько эффектов, таких как масштаб вместе с вращением. Например.,

$('#box4').delay(300).animate({scale: '1.5', rotate: '20deg'}, 500);

Почему QTransform?

До даты jQuery не поддерживает CSS3-анимацию. Этот плагин может помочь вам достичь вашей цели.

Надеюсь, это работает для вас.

Answer 4

В этом решении используются атрибуты данных CSS3, JQuery и HTML5.Это позволяет вам вращаться несколько раз в одном и том же направлении, используя CSS3.Другие решения CSS3 обычно вращаются в одну сторону, а затем назад в другую.Поворот только в одну сторону (например, по часовой стрелке) полезен для чего-то вроде кнопки обновления или загрузки.

<style>
    .rotate{
        -moz-transition: all 0.2s ease;
        -webkit-transition: all 0.2s ease;
        transition: all 0.2s ease;
    }
</style>

<div class="rotate" style="width: 100px; height: 100px; background-color: red;"></div>

<script>
    $(".rotate").click(function(){
        var rotate = 180;
        var elem = $(this);

        //get the current degree
        var currentDegree = 0;
        if(typeof(elem.attr('data-degree')) != 'undefined') {
            currentDegree += parseInt(elem.attr('data-degree'), 10);
        }

        //calculate the new degree
        var newDegree = currentDegree + rotate;

        //modify the elem css
        elem.css({ WebkitTransform: 'rotate(' + newDegree + 'deg)'});  
        elem.css({ '-moz-transform': 'rotate(' + newDegree + 'deg)'});
        elem.css('transform','rotate(' + newDegree + 'deg)');

        //store the degree for next time
        elem.attr('data-degree', newDegree);
    });
</script>

Примечание. Я сохраняю текущую степень в атрибуте данных, чтобы избежать анализа матрицы перехода.

Answer 5

Вот код, который я использовал для анимации масштаба и поворота с помощью jQuery:

    var $elem = $('#myImage');
    $({ deg: 0 }).animate({ deg: 359 }, {
        duration: 600,
        step: function (now) {
            var scale = (2 * now / 359);
            $elem.css({
                transform: 'rotate(' + now + 'deg) scale(' + scale + ')'
            });
        }
    });

В основном это циклы от 0 до 359, поворот моего изображения на столько градусов, а также масштабирование между 0 и 2, поэтому изображение увеличивается от нуля до двойного размера во время анимации.