Преобразовать в JQuery

Question

Я пытаюсь получить элемент для анимации эффекта наведения поворота с помощью jquery, у меня есть jsFiddle , который я собираюсь протестировать.Пока у меня есть это:

$(".icon").hover(function() {
        $(this).stop().animate({transform: "rotate(-90deg)", height: "200px"},400);
    },function() {
        $(this).stop().animate({backgroundColor : "black", color: "red"},400);
    });

Но, похоже, он совсем не вращается, я понимаю, что правильный способ установки CSS:

-webkit-transform:rotate (30deg);

Я пробовал это:

$(this).stop().animate({-webkit-transform: "rotate(-90deg)", height: "200px"},400);

, но тогда даже Высота не меняется.Любой совет поможет, спасибо!

Ссылка на JSFiddle

Answer 1

Кроме IE9, все браузеры, которые поддерживают преобразование, также поддерживают переход, поэтому вам лучше сделать это без JS, например:

.icon {
    -webkit-transition:all 400ms;   
    -moz-transition:all 400ms;
    transition:all 400ms; 
    display:block;
    width:100px;
    height:100px;
    background-color:red    
}

.icon:hover {
    -webkit-transform:rotate(-90deg);
    -moz-transform:rotate(-90deg);
    -ms-transform:rotate(-90deg);
    transform:rotate(-90deg)
}

Пример: http://jsfiddle.net/9CYET/14/

(Я знаю, что это не все свойства, которые вы хотели, но вы поняли! Если вы хотите изменить высоту, вам нужно будет установить источник преобразования в нужное место).

В IE9 это будетвращаться без анимации, и в старых браузерах ничего не произойдет.Вы можете взломать фильтры для IE, чтобы получить вращение и в действительно старых IE.

Answer 2

Лучший плагин jquery для применения CSS-преобразования в браузере - jquery transform .Он также может создавать анимацию и доступен на Github с подробной документацией.

Answer 3

Используйте отличный плагин jQuery Rotate.http://code.google.com/p/jqueryrotate/. Поддерживается всеми основными браузерами

* Internet Explorer 6.0 >
* Firefox 2.0 >
* Safari 3 >
* Opera 9 >
* Google Chrome 

Чтобы повернуть изображение, все, что вам нужно сделать, это $('#myImage').rotate(30) //for a 30 degree rotation Где #myImage - идентификатор элемента, который вы хотите повернуть.

Для анимации вращения вы можете использовать setTmeout, например:

setTimeout(function() { $('#myImage').rotate(30) },5)

Answer 4

Возможно, пост несколько устарел, но вам не нужен дополнительный плагин (это если вы не хотите поддерживать IE 8 и ниже).Я разобрал его следующим образом:

1 ) В CSS из HTML определим время преобразования:

.element {
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

Затем вваш скрипт:

$(".element").css("-webkit-transform", "rotateY(90deg)");
$(".element").css("transform", "rotateY(90deg)");

Это сработало для меня в Chrome, Firefox и Safari, я не тестировал IE, но он должен работать в IE9 и выше.

Answer 5

Если вы хотите что-то анимировать в css, вам просто нужно установить свойство css "transitionDuration" (нет необходимости в jQuery.animate), например:

var style = element.style;

style.webkitTransitionDuration = style.MozTransitionDuration = style.msTransitionDuration = style.OTransitionDuration = style.transitionDuration = '500ms';
style.MozTransform = style.webkitTransform = 'translate3d(100px,0,0)';
style.msTransform = style.OTransform = 'translateX(100px)';

Однако это будет работать только в современных браузерах, поэтому вы должны использовать jQuery.animate в качестве запасного варианта.

Вот плагин jQuery, который обрабатывает это:

https://github.com/benbarnett/jQuery-Animate-Enhanced

Она просто переопределяет функцию jQuery.animate, чтобы использовать анимацию css, если она доступна, поэтому вам не нужно беспокоиться о кросс-браузерных проблемах, просто вызовите jQuery.animate и будет вызван лучший из доступных методов.

Answer 6

jQuery animate не поддерживает ротацию (см. http://bugs.jquery.com/ticket/4171 и документацию jQuery )

Кроме того, для анимации поддерживается только CSS с числовыми значениями, что означает, что анимация цветов также не будет работать. К сожалению, не было известно, что jQuery UI добавил поддержку цветов.

Answer 7

jquery.transform.js - это плагин преобразования jquery 2d, разработанный Луи Реми. это позволяет использовать преобразование как CSS в JQuery. Посетите эту ссылку для иллюстрации того, как ее использовать. Простая иллюстрация для поворота элемента с помощью этого плагина выглядит следующим образом:

$(elem).animate({transform: 'rotate(135deg)'});

Answer 8

Если вы используете jquery, jquery.transit - это очень простая и мощная библиотека, которая позволяет вам выполнять преобразование, одновременно работая с кросс-браузерной совместимостью. Это может быть так просто: $ ("# element"). Transition ({x: '90px'}). Возьми по этой ссылке: http://ricostacruz.com/jquery.transit/

Answer 9

Я использовал это для масштаба:

var zoom_level = .4,
    multiplier = .2;
$('button.zoom-in, button.zoom-out').click(function(){
    zoom_level += $(this).hasClass('zoom-in') ? multiplier : -(multiplier);

    $('.floor').css({
        '-webkit-transform': 'scale(' + zoom_level + ')'
    });
});