$(document).ready(function(){ function animate() { $(‘body’).animate({backgroundColor:’#ffcc00′}, 500, function(){ $(‘body’).animate({backgroundColor:’#eeeeee’}, 500, function(){ $(‘body’).animate({backgroundColor:’#3b5998′}, 500, function(){ animate(); }); }); }); } animate(); });
Super smoothly with requestAnimationFrame For smoothly rendered scrolling animation one could use window.requestAnimationFrame() which performs better with rendering than regular setTimeout() solutions. A basic example looks like this. Function step is called for browser’s every animation frame and allows for better time management of repaints, and thus increasing performance. function doScrolling(elementY, duration) { var startingY … Read more
I don’t think this can be done using jQuery’s animate function because the background image does not have the necessary CSS properties to do such fading. jQuery can only utilize what the browser makes possible. (jQuery experts, correct me if I’m wrong of course.) I guess you would have to work around this by not … Read more
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’);
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-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
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
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);
I had the same problem and fixed it by including jQuery UI. Here is the complete script : <!– include Google’s AJAX API loader –> <script src=”http://www.google.com/jsapi”></script> <!– load JQuery and UI from Google (need to use UI to animate colors) –> <script type=”text/javascript”> google.load(“jqueryui”, “1.5.2”); </script> <script type=”text/javascript”> $(document).ready(function() { $(‘#menu ul li.item’).hover( function() … Read more