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
337
votes
18 answers

jQuery animate backgroundColor

I am trying to animate a change in backgroundColor using jQuery on mouseover. I have checked some example and I seem to have it right, it works with other properties like fontSize, but with backgroundColor I get and "Invalid Property" js error. The…
SteveCl
  • 4,529
  • 6
  • 29
  • 38
247
votes
6 answers

animating addClass/removeClass with jQuery

I am using jQuery and jQuery-ui and want to animate various attributes on various objects. For the sake of explaining the issue here I've simplified it to one div that changes from blue to red when the user mouses over it. I am able to get the…
Johannes
  • 6,232
  • 9
  • 43
  • 59
189
votes
12 answers

jQuery .scrollTop(); + animation

I set the page to scroll to top when a button is clicked. But first I used an if statement to see if the top of the page was not set to 0. Then if it's not 0 I animate the page to scroll to the top. var body = $("body"); var top = body.scrollTop()…
Juan Di Diego
  • 1,893
  • 2
  • 12
  • 4
180
votes
21 answers

Animate element to auto height with jQuery

I want to animate a
from 200px to auto height. I can’t seem to make it work though. Does anyone know how? Here’s the code: $("div:first").click(function(){ $("#first").animate({ height: "auto" }, 1000 ); });
Daniel
  • 1,869
  • 2
  • 12
  • 7
132
votes
6 answers

Animate scroll to ID on page load

Im tring to animate the scroll to a particular ID on page load. I have done lots of research and came across this: $("html, body").animate({ scrollTop: $('#title1').height() }, 1000); but this seems to start from the ID and animate to the top of…
Adi
  • 4,034
  • 13
  • 56
  • 78
88
votes
7 answers

CSS rotation cross browser with jquery.animate()

I'm working on creating a cross-browser compatible rotation (ie9+) and I have the following code in a jsfiddle $(document).ready(function () { DoRotate(30); AnimateRotate(30); }); function DoRotate(d) { $("#MyDiv1").css({ …
frenchie
  • 51,731
  • 109
  • 304
  • 510
77
votes
5 answers

Correct way to animate box-shadow with jQuery

Which is the correct syntax to animate the box-shadow property with jQuery? $().animate({?:"0 0 5px #666"});
chchrist
  • 18,854
  • 11
  • 48
  • 82
59
votes
12 answers

jQuery animate background position

I can't seem to get this working. $('#product_family_options_dd').animate({ height: '300px', width: '900px', backgroundPosition: '-20px 0px', }, The height and width animate but not the background.
jimbo
  • 621
  • 1
  • 5
  • 4
59
votes
7 answers

Rotating a Div Element in jQuery

Trying to rotate a div element...This might be DOM blasphemy, could it work possibly with a canvas element? I'm not sure - if anybody has any ideas of how this could work or why it doesn't, I'd love to know. Thanks.
user43889
  • 601
  • 1
  • 7
  • 3
59
votes
13 answers

Scroll smoothly to specific element on page

I want to have 4 buttons/links on the beginning of the page, and under them the content. On the buttons I put this code: Scroll to element 1 Scroll to element 2 Scroll to…
M P
  • 855
  • 5
  • 14
  • 18
52
votes
3 answers

jquery prepend + fadeIn

I have this code: $.ajax({ url : url, data : {ids : JSON.stringify(jsonids), hotel_id: hotel_id}, success : function(response) { $('#be-images ul').prepend(response).fadeIn('slow'); }, …
yretuta
  • 7,963
  • 17
  • 80
  • 151
51
votes
3 answers

How do you fadeIn and animate at the same time?

Using jQuery I'm creating a basic 'tooltip' animation so that the tooltip will appear in a little animation in which it fades into view as well as move vertically. So far I have this: $('.tooltip').fadeIn('slow'); $('.tooltip').animate({ top:…
JayNCoke
  • 1,091
  • 2
  • 11
  • 17
50
votes
8 answers

Change text (html) with .animate

I am trying to animate the html part of a tag ( This Text! ) using jQuery's Animate function, like so: $("#test").delay(1500).animate({text:'The text has now changed!'},500); However nothing happens, it does not…
Jeff
  • 12,085
  • 12
  • 82
  • 152
46
votes
9 answers

Jquery - animate height toggle

I have a 10px bar along the top of the screen that, when clicked, I want it to animate to a height of 40px and then if clicked again, animate back down to 10px. I tried changing the id of the div, but it isn't working. How could I get this to work,…
We're All Scholars
  • 581
  • 2
  • 5
  • 7
45
votes
5 answers

using jQuery .animate to animate a div from right to left?

I have a div absolutely positioned at top: 0px and right: 0px, and I would like to use jquery's .animate() to animate it from it's current position to left: 0px. How does one do this? I can't seem to get this to…
Alex
  • 64,178
  • 48
  • 151
  • 180
1
2 3
99 100