jQuery animate background position
You don’t need to use the background animate plugin if you just use separate values like this: $(‘.pop’).animate({ ‘background-position-x’: ‘10%’, ‘background-position-y’: ‘20%’ }, 10000, ‘linear’);
jquery-animate
animating addClass/removeClass with jQuery
Since you are not worried about IE, why not just use css transitions to provide the animation and jQuery to change the classes. Live example: http://jsfiddle.net/tw16/JfK6N/ #someDiv{ -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; }
CSS rotation cross browser with jquery.animate()
CSS-Transforms are not possible to animate with jQuery, yet. You can do something like this: function AnimateRotate(angle) { // caching the object for performance reasons var $elem = $(‘#MyDiv2’); // we use a pseudo object for the animation // (starts from `0` to `angle`), you can name it as you want $({deg: 0}).animate({deg: angle}, { … Read more
Rotating a Div Element in jQuery
To rotate a DIV Make use of WebkitTransform / -moz-transform: rotate(Xdeg). This will not work in IE. The Raphael library does work with IE and it does rotation. I believe it uses canvases If you want to animate the rotation, you can use a recursive setTimeout() You could probably even do part of a spin … Read more
Animate element to auto height with jQuery
Save the current height: var curHeight = $(‘#first’).height(); Temporarily switch the height to auto: $(‘#first’).css(‘height’, ‘auto’); Get the auto height: var autoHeight = $(‘#first’).height(); Switch back to curHeight and animate to autoHeight: $(‘#first’).height(curHeight).animate({height: autoHeight}, 1000); And together: var el = $(‘#first’), curHeight = el.height(), autoHeight = el.css(‘height’, ‘auto’).height(); el.height(curHeight).animate({height: autoHeight}, 1000);
jQuery animate backgroundColor
The color plugin is only 4kb so much cheaper than the UI library. Of course you’ll want to use a decent version of the plugin and not some buggy old thing which doesn’t handle Safari and crashes when the transitions are too fast. Since a minified version isn’t supplied you might like test various compressors … Read more
How to fade animate background images (full size) [closed]
This is how I would do it with a couple of jQ lines: var $bg = $(‘#bg’), $bgDIV = $(‘div’, $bg), // Cache your elements n = $bgDIV.length, // count them (used to loop with % reminder) c = 0; // counter (function loopBG(){ $bgDIV.eq(++c%n).hide().appendTo($bg).fadeTo(3000,1, loopBG); }()); // start fade animation *{margin:0; padding:0;} body{ width:100%; … Read more