jquery-animate

I am trying to display my products animation with the following code (jquery) var prodNum = <%=prodNum %>; var i = 1; $.timer(5000, function(timer) { $(".prods").hide("slide", { direction: "down" }, 500, function() { $(".prods").html("<div class=\"prod\">" + $("#pr" + ((4*i) % prodNum)).html() + "</div>" + "<div class=\"prod\">" + $("#pr" + ((4*i + 1) % prodNum)).html() + "</div>" + "<div class=\"prod\">" + $("#pr" + ((4*i + 2) % prodNum)).html() + "</div>" + "<div class=\"prod\">" + $("#pr" + ((4*i + 3) % prodNum)).html() + "</div>"); $(".prods").show("slide", { direction: "down" }, 500); i++

I'm trying to animate the fill color of a group of path's loaded from an external SVG using Keith Wood's plugin . First I import the SVG into a div container: $(document).ready(function() { $('#header-main').svg({loadURL: 'header.svg'}); var svg = $('#header-main').svg('get'); }); The SVG file looks like this: <svg> <g id="group1"> <path d="M0,22.943V0.223h1.413v22.721H0z"/> <path etc../> </g> </svg> I can change the fill color of the group or individual paths like so: svg.style('#group1 {fill: black}'); Now when I try to animate the paths like this: $('path').animate({svgFill: 'blue'}, 500);

Is it possible to call some function in .animate event? I have to call resize() function for every resize event on some div. For an example, I call function on window resize event: $(window).resize(resize); But now I wish to call this function inside animate event(every changed pixel(like .resize does)). selector['el']['box'].animate({width:selector['el']['box'].width() - 250}, 500); selector['el']['box'].promise().done(function() {resize();}); But this is not what I want, because I wish resize function to be called all the time, not only on the end... you could use its step function, like:

I have an animation (a div with a background image) which has another animation as callback. A car drives from right to left, then turns and drives back. all with some delay. I want the whole animation run again infinite times. Here is the code: var tempoPolente = 10000; var viewport = $(window).width() + 300; // Animation var polenteAnim = function() { $("#polente").removeClass('flip').animate({"right": "+="+viewport}, tempoPolente, 'linear', function() { setTimeout(function() { $("#polente").addClass("flip").animate({"right": "-="+viewport}, tempoPolente, 'linear'); }, 1000); }); }; dc5

This code and animation works perfectly on jQuery 1.4.4 and below, but not on later versions. Could anyone shed some light on this issue and help with a version that works with latest jQuery. I have provided a fiddle below. http://jsfiddle.net/Y7Ek4/10/ The poof effect basically relies on adjusting the background-position to create a css sprite animation, but it borked on new jQuery. jQuery's animate is no longer appropriate for sprite animations. I had to roll my own using setTimeout . The effect is inspired by the one used for removing items from OS X dock. The sprite: The relevant JS code: