Вопрос по css3, jquery, rotation, transform, jquery-animate – Анимация CSS-преобразования с помощью jQuery

7

Я пытаюсь оживить div и заставить его вращаться вокруг оси y на 180 градусов. Когда я вызываю следующий код, я получаю ошибку jQuery:

$("#my_div").animate({
       "transform": "rotateY(180deg)",
       "-webkit-transform": "rotateY(180deg)",
       "-moz-transform": "rotateY(180deg)"
    }, 500, function() {
        // Callback stuff here
    });
});

Там написано «Uncaught TypeError: Невозможно прочитать свойство» a «defaultView». из неопределенного & quot; и говорит, что это в самом файле jQuery ... что я делаю не так?

Ваш Ответ

4   ответа
4

$('#myDiv').animate({ textIndent: 0 }, {
    step: function(go) {
      $(this).css('-moz-transform','rotate('+go+'deg)');
      $(this).css('-webkit-transform','rotate('+go+'deg)');
      $(this).css('-o-transform','rotate('+go+'deg)');
      $(this).css('transform','rotate('+go+'deg)');
    },
    duration: 500,
    complete: function(){ alert('done') }
});

http://jsfiddle.net/RPSzb/2/

спасибо, я закончил тем, что получил плагин под названием Transit, так как это единственный способ сделать #D ротации, кажется ... Joey
1

Но вы можете анимировать пользовательские свойства с.animate() и выполнить преобразование «вручную» с использованиемstep function:

var $myDiv = $("#my_div"),
    ccCustomPropName = $.camelCase('custom-animation-degree');
$myDiv[0][ccCustomPropName ] = 0; // Set starting value
$myDiv.animate({ccCustomPropName : 180},
    {
        duration: 500,
        step: function(value, fx) {
            if (fx.prop === ccCustomPropName ) {
                $myDiv.css('transform', 'rotateY('+value+'deg)');
                // jQuery will add vendor prefixes for us
            }
        },
        complete: function() {
            // Callback stuff here
        }
    });

Увидетьэта скрипка для рабочего примера (нажмите на синее поле).

Это похоже нанеопределенный ответ но он не использует реальное свойство CSS.

Note: Имя пользовательского свойства должно бытьjQuery.camelCase () имя с.animate() использует внутренние имена camelCased и, следовательно, будет хранить текущее значение свойства, используя имя camelCased иfx.prop также будет верблюжьим именем.

0

$.animate()вместо$.velocity(). Velocity.js это расширение анимации jQuery. Он использует тот же синтаксис, что и jQuery, и позволяет анимировать CSS3, например, 3D-преобразования, переводы, повороты, выцветание цветов, переходы, перекосы ... Все, что вы хотите. А поскольку он достаточно умен, чтобы по возможности использовать CSS3 вместо JS, он также оживляет с лучшей производительностью. Я не понимаю, почему jQuery еще этого не делает!

http://julian.com/research/velocity/

4

ь jQuery для добавления / удаления класса:

CSS:

#my_div {
    -moz-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
}
.rotate {
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

jQuery:

$("#my_div").addClass('rotate');

Похожие вопросы