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
40
votes
2 answers

jQuery $.animate() multiple elements but only fire callback once

If you select a class or collection of elements to animate with jQuery: $('.myElems').animate({....}); And then also use the callback function, you end up with a lot of unneccessary animate() calls. var i=1; $('.myElems').animate({width:'200px'},…
totallyNotLizards
  • 8,489
  • 9
  • 51
  • 85
36
votes
8 answers

jQuery animate margin top

I have a script on jsfiddle: http://jsfiddle.net/kX7b6/ Nothing happens on hover On hover I want the green box to overlap the red box with a negative margin -50px. Nothing happens. The animation works, but not margin Just to show that the animation…
Jens Törnell
  • 23,180
  • 45
  • 124
  • 206
34
votes
8 answers

How do you animate the value for a jQuery UI progressbar?

I've setup a jQuery UI progressbar but can't use jQuery animate to animate it's value. Any ideas on how to make this work? The percentDone variable holds a number from 0 to 100 showing how far along the scrollbar should be (this works fine). I've…
Julian
  • 8,808
  • 8
  • 51
  • 90
34
votes
2 answers

Animate bootstrap columns

Here's what I'd like to do: Initial Display --------------------------------------------- | | | | | | | …
Ronnie Overby
  • 45,287
  • 73
  • 267
  • 346
33
votes
4 answers

how to use animation with ng-repeat in angularjs

I have a list which I iterate over by using ng-repeat: and the user can interact with thte list items by using up-arrow and down-arrow icons and on click of them i simply change the order of the element in the "list" this is what angular suggests…
Rishul Matta
  • 3,383
  • 5
  • 23
  • 29
32
votes
9 answers

Animate background image change with jQuery

I finally have this working now but would like to know how I can use JQuery's animate function to make the background image changes fade in nicely when you hover over the list items on the homepage:- http://www.thebalancedbody.ca/ The Code to make…
Jonathan Lyon
  • 3,862
  • 7
  • 39
  • 52
31
votes
1 answer

How do I force redraw with Google Maps API v3.0?

I have a fairly sophisticated Maps application that handles multiple custom markers and such. I have a function called resizeWindow that I call in a listener to that whenever the screen is changed, the map redraws itself by calculating new bounds…
Doug Wolfgram
  • 2,064
  • 4
  • 27
  • 42
30
votes
5 answers

How do I animate a scale css property using jquery?

I am trying to have a circle div with the class of "bubble" to pop when a button is clicked using jQuery. I want to get it to appear from nothing and grow to its full size, but I am having trouble getting it to work. heres my code: HTML Show…
Weylin Wagnon
  • 313
  • 1
  • 4
  • 8
30
votes
3 answers

jQuery animate css border-radius property (webkit, mozilla)

Is there a way in jQuery to animate the css3 border-radius property available in Webkit and Mozilla browsers? I haven't found a plugin that will do it. -webkit-border-radius -moz-border-radius
user113716
  • 318,772
  • 63
  • 451
  • 440
29
votes
7 answers

jQuery Slide Up Table Row

I am building a custom jQuery plugin which allows the user to delete records within a table in real-time, among many other things. When the records are deleted, I would like the the background-color of the deleted table row to turn red, then slide…
Oliver Spryn
  • 16,871
  • 33
  • 101
  • 195
29
votes
3 answers

jQuery .delay() not delaying the .html() function

I'm trying to do a little javascript trick to fade out a div, replace its content, and fade it back in. The .html event is replacing the content before the fadeOut is complete... $("#products").fadeOut(500) .delay(600) …
Derek Adair
  • 21,846
  • 31
  • 97
  • 134
29
votes
3 answers

jQuery opacity animation

I am making a website, and it allows users to change view options. I use jQuery to smooth animations for font changing. It fades the whole page out and back in again with the new fonts. The fade out animation is fine, but when it fades back in,…
xsznix
  • 2,535
  • 2
  • 17
  • 14
29
votes
6 answers

How to animate CSS Translate

Is it possible to animate the CSS property translate via jquery? $('.myButtons').animate({"transform":"translate(50px,100px)"}) and does it work in many browsers? Demo not working: http://jsfiddle.net/ignaciocorreia/xWCVf/ UPDATE: My…
Ignacio Correia
  • 3,611
  • 8
  • 39
  • 68
28
votes
5 answers

jquery animate .css

I have a script: $('#hfont1').hover( function() { $(this).css({"color":"#efbe5c","font-size":"52pt"}); //mouseover }, function() { $(this).css({"color":"#e8a010","font-size":"48pt"}); // mouseout } ); how can i…
Plaski
  • 299
  • 1
  • 5
  • 7
27
votes
3 answers

Show Div when scroll position

First of all i would like to refer to this website: http://annasafroncik.it/ I love the way the animations come into view. Is it hard to create a similar function in jquery? Are there any plugins to create such an effect? Hope someone will help me…
idbranding
  • 729
  • 3
  • 10
  • 15