Convert to jQuery

Question

I am trying to get an element to animate the rotation effect using jquery, I have this jsFiddle . So far I have this:

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

But it doesn't rotate it at all, I understand that the correct way to install css is:

-webkit-transform: rotate (30deg);

I tried this:

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

but then even the height does not change. any advice will help thanks!

JSFiddle Link

Answer 1

Use the excellent jQuery Rotate plugin. http://code.google.com/p/jqueryrotate/ . It is supported by all major browsers.

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

To rotate an image, you only need $('#myImage').rotate(30) //for a 30 degree rotation Where #myImage is the identifier of the element you want to rotate.

To animate the rotation, you can use setTmeout ex:

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

Answer 2

In addition to IE9, all browsers that support conversion also support transition, so you might be better off doing this without JS as follows:

 .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) } 

Example: http://jsfiddle.net/9CYET/14/

(I know that these are not all the properties that you need, but you get the idea! If you want to change the height, you need to set the start of the conversion to the right place).

In IE9, which will spin without animation, and nothing will happen in older browsers. You could hack filters with IE to get a twist on really old IEs.

Answer 3

The best jquery plugin for applying CSS transform in a browser is jquery transform . It can also perform animations and is available on Github with detailed documentation.

Answer 4

The message is probably a bit outdated, but you do not need an additional plug-in (this is if you do not want to support IE 8 and below). I sorted it as follows:

1 ). CSS HTML defines conversion times:

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

Then in the script do:

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

This worked for me in Chrome, Firefox and Safari, I did not test its IE, but it should work in IE9 and higher.

Answer 5

jQuery animate does not support rotation (see http://bugs.jquery.com/ticket/4171 and jQuery Documentation )

In addition, only CSS with numeric values ​​for animation is supported, which means that animated colors will also not work. Oops, did not know that the jQuery user interface adds color support.

Answer 6

If you want to animate something in css, you just need to set the css property of the transition "transitionDuration" (no need for jQuery.animate), for example:

 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)'; 

However, this will only work in modern browsers, so you need to use jQuery.animate as a backup.

Here is the jQuery plugin that handles this:

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

It just overrides the jQuery.animate function to use the css animation, if available, so you don’t have to worry about cross-browser issues, just call jQuery.animate and choose the best available method.

Answer 7

I used this for scale:

 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 + ')' }); }); 

Answer 8

If you use jquery, jquery.transit is a very simple and powerful library that allows you to do your own cross-browser transformation for you. It could be that simple: $ ("# element"). Transition ({x: '90px'}). Take it from this link: http://ricostacruz.com/jquery.transit/

Answer 9

jquery.transform.js is a jquery 2d conversion plugin developed by Louis remi. it allows you to use conversion like css in jquery. visit this link for some illustrations on how to use it. A simple illustration for rotating an element using this plugin is as follows:

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