jquery-animate

I'm having a hard time googling this issue because most of the things I can find are about animations that are supposed to be fast but are acting slow. My question is regarding an animation that I want to have a long duration but still be smooth. I've created this jsfiddle to demonstrate the issue: http://jsfiddle.net/93Bqx/ I'm trying to make an element slowly move to another position over time. But the animation is very choppy. Basically, it boils down to something like this: $elem.animate({ left: x, top: y }, someLargeNumber); I'm wondering if the problem is that the animation is so slow

I'm having trouble creating a flyout menu with a specific effect. The flyout goes from display:none to block and then I use jquery to animate opacity from 0 to 1 (and vice versa). This is necessary because otherwise the transition does not happen when the element has just had it's display property changed. I did not think that this would propagate to children. But inside of my flyout I have 4 columns of links that have an opacity transition, each with it's own delay so they come in one at a time. However, this does not work as the flyout appears. They are instantly at opacity: 1 and even with

I am making a futsal (indoor soccer) coaching application which allows a coach to add players on the screen, set their movement direction (by drawing arrows using HTML5 canvas), and then press 'play' to move all players on the screen. A player is made up of a div with a background image of a player. Animation is being done by using jquery .animate() function. All I do is change the player div's left and top css position attributes. I would like to do two things and unsure on how that can be done: I want to create a jQuery slider and move it incremently as the animation takes place. I am

I'm trying to animate a set of elements simultaneously (almost, there's a small delay between each animation): $('.block').each(function(i){ $(this).stop().delay(60 * i).animate({ 'opacity': 1 }, { duration: 250, complete: mycallbackfunction // <- this fires the callback on each animation :( }); }); How can I run a callback function after all animations have completed? Use a closure around a counter variable. var $blocks = $('.block'); var count = $blocks.length; $blocks.each(function(i){ $(this).stop().delay(60 * i).animate({ 'opacity': 1 }, { duration: 250, complete: function() { if (--count

I'm trying to animate a div, and get it to rotate about the y-axis 180 degrees. When I call the following code I get a jQuery error: $("#my_div").animate({ "transform": "rotateY(180deg)", "-webkit-transform": "rotateY(180deg)", "-moz-transform": "rotateY(180deg)" }, 500, function() { // Callback stuff here }); }); It says "Uncaught TypeError: Cannot read property 'defaultView' of undefined" and says it's in the jQuery file itself... what am I doing wrong? You can also predefine the rotation in a CSS class and use jQuery to add/remove the class: CSS: #my_div { -moz-transition: all 500ms ease;

Please take a look at this fiddle: http://jsfiddle.net/dhcyA/ Try clicking on a block. What I want is that when the other elements disapear, the selected block will animate/ease to his giving position instead of just jumping like it does now. Then the same animation repeats itself when clicking again on the box, but then back to place. Maybe to keep in mind: I'm using a reponsive design, which means those blocks can be vertical and horizontal after scaling the window. Any redevisions on the fiddle or suggustions would be great! Here is my solution. On your existing markup, I added a wrapper