jQuery .animate() not responding to millisecond settings

Question

I'm using jQuery's .animate() to move a div around, and we need it to go slower. It seems the slow, default, and fast settings have preset values of 200, 400, and 600 milliseconds, respectively, but the documentation states it can also be set to a specific amount. I need the animation to take at least 1000 ms, possible more. However, when setting "1000" or "1000ms", it seems to run at default speed.

Here's the function call I used:

  $("#welcome_popup").animate (
    {
    "top": "0px",
    "left": "590px",
    "right": "150px",
    "font-size": "13pt",
    "padding": "7px",
    "boxShadow": "6px 6px 5px rgba(0, 0, 0, .2)"
    }, "800");

I've tried it elsewhere and gotten the same result. Here's an example from the web:

http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_animation2

In W3 School's own example, I can't seem to set the animate speed to anything other than those three values. Has anyone else done this?

Answer 1

Per the DOCS

duration (default: 400) Type: Number or String A string or number determining how long the animation will run.

When using Numbers in jQuery, they are not quotes as strings are.

EXAMPLE

$( "#clickme" ).click(function() {
  $( "#book" ).animate({
    opacity: 0.25,
    left: "+=50",
    height: "toggle"
  }, 5000, function() {
    // Animation complete.
  });
});

JSIFDDLE