Making Elements Visible by Sliding Them Up - J Query

Problem
You want to slide the content block into view, but the UI design dictates that the content must slide upward when being revealed. The slideUp method would hide the element,reducing the height from the top position.To slide upward, we need to use CSS to position the element and then consider the content that we are revealing.

Solution

HTML

We need to absolutely position the element we are animating to get it to stick to the bottom position so it can animate upward when revealing.
To achieve this, we need to wrap the animating element in another <div>(or the element that suits your design) and give it a position: relative style. (This may also be position: absolute. We just need a defined position to trigger the position: abso lute on #revealUp to position relatively to; however, since we want the document to flow normally, we’ve used position: relative.)

CSS

Now we need to give the box element a relative position so that we can absolutely position #revealUp relative to it:

jQuery

We can toggle the #revealUp based on the element’s height. We’re going to longer lengths to animate the height upward (by checking the current height) rather than just using slideToggle()—but we’ll look at why in the discussion:

Discussion
This solution requires that we check the height of the box to then determine how we proceed.Notice how we don’t use slide Toggle, which behind the scenes is very similar, if not the same as, using .animate({ height: 'toggle' }).The reason we’re not using the toggle is that for the toggle to work correctly, it needs to capture the real height from somewhere. As the element starts with a height of zero,jQuery has no way to work out what the full height is. If we used slideToggle, the #revealUp element appears briefly as a 1-pixel slither and then disappears again. This is because there’s no real height to animate to.Instead, we determine whether the height is great than zero and then animate the height accordingly. Since the element is nested within another element with position: relative, we can give it a height of 100 percent, and it will grow to fill the space.


All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

J Query Topics