CODEWITHSUNDEEP
jqueryjquery-animate
Sourabh
Sourabh

Reputation: 8502

SlideUp on a form not working as expected

Take a look at this fiddle.

I increased the duration to 2000 to exactly show you what I am talking about. When you click the close (X) the animation is not what one would call slideUp. I was expecting that the form would move upward until it fully disappears. Instead, it hides from bottom to top slowly.

Is the slideUp expected to behave like it is? Or is it something that I did?

I am guessing its because of this part of CSS (line 15)

.js-enabled form {
    position: absolute;
    top: -21px;
    display: none;
}

Upvotes: 0

Views: 459

Answers (2)

nnnnnn
nnnnnn

Reputation: 150080

That is normal behaviour for .slideUp(). From the doco:

The .slideUp() method animates the height of the matched elements. This causes lower parts of the page to slide up, appearing to conceal the items.

Or to paraphrase, it is the elements below the one being hidden that will appear to slide upwards. But in your case because you had position:absolute; the elements below had more of a "reveal" effect than a slide.

You can get the element itself to actually slide if you use the .animate() method to change the top of the element:

.animate({top : -$this.height()-100}, 2000)

Demo: http://jsfiddle.net/dj2Y8/4/

For purposes of the demo I simply animate the top to a sufficiently negative position that it moves off the top of the window, easy enough when the element is at the top of the page though -$this.height() wasn't quite high enough so I arbitrarily subtracted an extra 100. Obviously you'd need to tweak this if the element wasn't at the top of the page, perhaps animating several CSS properties at once.

Upvotes: 1

Mooseman
Mooseman

Reputation: 18891

Even though you had slideDown under the config, you were using fadeIn under init. I also changed the 2000ms (2 seconds) to 500ms (1/2 second). Fiddle: http://jsfiddle.net/dj2Y8/3/

jQuery slideUp essentially animates the height of the element to 0px and hides it; so yes, it is working how it should.

Upvotes: 1

Related Questions