How to implement height through animate in jquery
In this article, the editor introduces in detail "how jquery achieves height through animate". The content is detailed, the steps are clear, and the details are handled properly. I hope this article "jquery how to achieve height through animate" can help you solve your doubts.
The code looks something like this:
/ / .pageNav _ btn is the trigger block
/ / .pageNav _ close close tag
/ / .pageNav _ item pull up and down the slider
$(".pageNav _ btn") .click (function (event) {
If ($(this) .hasClass ("pageNav_close")) {
$(".pageNav _ item") .animate ({"height": 0}, 400)
$(this) .removeClass ("pageNav_close")
} else {
$(".pageNav _ item") .animate ({"height": "auto"}, 400)
$(this) .addClass ("pageNav_close")
}
})
No drop-down effect is achieved
So I started looking for a reason:
Using Firefox to review the element, you can see that the first load looks like this:
First load
After the first trigger,
The first trigger event
The second time it was triggered,
The second trigger event
Thus it can be seen that animate () is actually executed. After querying the styles parameter in W3choolfocus animate (), the height attribute is supported, but height needs to have an exact value, but I think "auto" animate does not recognize it.
So we give a definite value here in height is OK.
So the question is, if there is a fixed height value, why do we still use height:auto?
This must be an unknown height value, so we have to get the future height value before performing the animate
So paste the code.
Define the current height value of the container, as well as the future height value
Var JoinFisher = $(".join")
CurrentHeight = JoinFisher .height ()
AutoHeight = JoinFisher .css ('height',' auto') .height ()
JoinFisher .height (currentHeight) .animate ({height: autoHeight}, 1000)
So finish the above code
$(".pageNav _ btn") .click (function (event) {
If ($(this) .hasClass ("pageNav_close")) {
$(".pageNav _ item") .animate ({"height": 0}, 400)
$(this) .removeClass ("pageNav_close")
} else {
$(".pageNav _ item") .animate ({"height": "auto"}, 400)
$(this) .addClass ("pageNav_close")
}
})
After reading this, the article "how to achieve height through jquery through animate" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself. If you want to know more about related articles, welcome to follow the industry information channel.
