CODEWITHSUNDEEP
javascriptjquery
Boardy
Boardy

Reputation: 36205

Sliding a div across the screen using jquery

I am working on a project where I have a div which shows data that is returned from an AJAX call to PHP.

When the user clicks on something, I want the container div to slide over to the left but for some reason the animation is not working.

Below is my jquery snippet that isn't working:

$( "#downloadsContainer" ).animate({
                    position: "absolute",
                    left: "-200px",
                  }, 5000, function() {
                    // Animation complete.
                  });

When I run the above code, nothing happens, I see no errors in the chrome console.

However, if I run the following code it works just without the animation obviously:

$("#downloadsContainer").css({ "position": "absolute", "left": "-200px" });

I don't understand what's wrong with the animation and why nothing is happening.

Upvotes: 0

Views: 116

Answers (1)

adeneo
adeneo

Reputation: 318192

jQuery's animate needs a starting point, somewhere to animate from, so the left value has to be set before animating, even to zero, as long as it's not auto, the default value.

jQuery css() doesn't have this issue, it doesn't need a starting point, it just sets the value.

Also, to position an element and make the element actually move, the element must have a position other than the default static set before animating.

Upvotes: 1

Related Questions