Shulou(Shulou.com)06/01 Report--

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.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.