Questions tagged [jquery-animate]

Refers to jQuery's animate() method. For generic graphical animations, see the animation tag.

Refers to 's animate() method. For generic graphical animations, see the tag.

API Documentation.

Example usage:

$('p').animate({
    width: 200,
    height: 300
}, 1000, function() {
    alert('Animation complete!')
});

This particular animation modifies the width and height of all matching <p> elements over a period of 1000 milliseconds (1 second). Once the animation is complete, it fires an alert to inform the user.

Related tags

6162 questions
27
votes
8 answers

jQuery cross-browser "scroll to top", with animation

Right now I'm using this: $('#go-to-top').each(function(){ $(this).click(function(){ $('html').animate({ scrollTop: 0 }, 'slow'); return true; }); }); which doesn't work in Chrome, and in Opera I get a small flicker: the browser instantly…
Alex
  • 66,732
  • 177
  • 439
  • 641
27
votes
3 answers

jQuery, calling a callback only once after multiple animations

Let's say that I have several animations running at once, and I want to call a function once all of them are finished. With only one animation, it's easy; there's a callback for that. For example : $(".myclass").fadeOut(slow,mycallback); Trouble…
David V.
  • 5,708
  • 3
  • 27
  • 27
25
votes
12 answers

Fade the background-color of a span tag with JQuery

I'm trying to fade the background-color of a span tag using JQuery to emphasize when a change has occured. I was thinking the code would be someting like the following inside the click handler, but I can't seem to get it working. Can you show me…
Russ Clark
  • 13,260
  • 16
  • 56
  • 81
25
votes
4 answers

Animating Bootstrap progress bar width with jQuery

I want to animate a progress bar's width from 0% to 70% over 2.5 seconds. However, the code below immediately changes the width to 70% after a 2.5 second delay. What am I missing? $(".progress-bar").animate({ width: "70%" }, 2500); JSFiddle:…
23
votes
3 answers

jQuery animate of custom value (not a CSS property)

I'd like to do the strangest thing: make a value change with animate which isn't a css property but just a variable. I need this because I want to rotated an element when an user clicks on its border. So I need to animate the angle value and then…
Epsiloncool
  • 1,435
  • 16
  • 39
22
votes
4 answers

jQuery delay() - how to stop it?

I already tried stop(true,true), stop(true) and clearQueue(); but this doesn't work. I have problem with fast changing slides, i already have some function what have to reset everything, but it doesn't work. function reset(){ …
rojikada
  • 347
  • 1
  • 3
  • 9
22
votes
4 answers

jQuery offset().top returns wrong value - error with margin

if you try to get a top offset from a list element within a parent, and that parent is not positioned at the top, you will get a wrong value. http://jsbin.com/yuxacuduna/1/edit?html,css,js,console,output Try removing the margin-top on the .container…
user3631654
  • 1,735
  • 6
  • 22
  • 38
22
votes
7 answers

JQuery synchronous animation

In many cases I wish animation to be executed synchronously. Especially when I wish to make a a series of sequential animations. Is there an easy way to make a jQuery animate function call synchronous? The only way I thought about is to set a flag…
Elazar Leibovich
  • 32,750
  • 33
  • 122
  • 169
21
votes
6 answers

Animating inline elements with jQuery

I am trying to show and hide an inline element (eg a span) using jQuery. If I just use toggle(), it works as expected but if I use toggle("slow") to give it an animation, it turns the span into a block element and therefore inserts breaks. Is…
rnielsen
  • 700
  • 1
  • 5
  • 11
21
votes
4 answers

Animate CSS display

Is there a way to animate the CSS display property in jQuery? I have the following: $(".maincontent").css("display","block"); and want it to do something like this: $(".maincontent").animate({"display": "block"}, 2500);
danyo
  • 5,686
  • 20
  • 59
  • 119
20
votes
6 answers

jQuery on window scroll animate background image position

I am trying to achieve a scrolling effect using jQuery. I have a background div set to 100% browser window size with overflow hidden. This has a large background image that is approx. 1500px x 2000px. The effect I want is when the user scrolls down…
mtwallet
  • 5,040
  • 14
  • 50
  • 74
19
votes
1 answer

Check if element is being animated CSS3

Is there any way to check if element is being animated? But being animated not with jquery's animate, but with css3's transition.. The problem I have is... I have this slider, on arrow click I give it left = left+200 where left is either…
fxck
  • 4,898
  • 8
  • 56
  • 94
19
votes
4 answers

Can I use .delay() together with .animate() in jQuery?

I have this code, which slides open a basket preview on a website I am working on. It stays open if the user is hovered on it, but I want it to have a two second delay before the callback for my hover is triggered. This is just in case the user…
Sabai
  • 1,579
  • 5
  • 24
  • 40
18
votes
10 answers

How to make a jquery infinite animation?

I'm trying to implement a jQuery function with an infinite loop to animate the body background with 3 colours. I cannot think of a nice and clean solution. Something like this? $(document).ready(function(){ …
Mauro74
  • 4,686
  • 15
  • 58
  • 80
18
votes
4 answers

jQuery Animation Speed?

Final Edit: The wall of text below can be summed up by simply asking "can I specify the speed of animations using jQuery's animate()? All that is provided is duration." ~~ jQuery's animate() seems to implement easing despite my use of "linear". …
Langdon
  • 19,875
  • 18
  • 88
  • 107