We struggle with non-smooth animation of hidden elements.
When working with jQuery, many people sooner or later encounter one feature: when we want to show a hidden block with animation, its appearance can be jerky. This does not always happen, but quite often. Unfortunately, not all developers know how to deal with this, and those who know are often lazy. An obvious example of a jerky appearance of a block can be viewed directly on the jQuery main page by clicking the Run Code button:
I note that the glitch on this particular page can be seen in all browsers except ie6 and ie7. So, if you click on the Run Code button, we will see the smooth appearance of the “p.neat” block from a transparent state with a zero height and width to about this state:
')
After that, the height of the block jumps sharply to the open state:
It may even seem that the browser “slowed down” for a split second, but the real reason for this behavior is that jQuery does not correctly count the height of the invisible block. But do not rush to shoot a musician, let's try to figure out why this is happening. I note in advance, with this glitch you can almost always cope.
First, let's designate some conditions for the appearance of a glitch: It occurs when we want to “expand” a block that is not previously visible on the page using the functions show (speed), toggle (speed), slideDown () and animate ({height: 'show '}). Obviously, in order to make the animation of the opening of a block, you need to change its height from zero to some height. Moreover, this height must be calculated before the start of the animation. As you know, HTML and CSS provide us with only 2 ways to hide a block, these are display: none and visibility: hidden properties. In the first case, the element simply turns off, as if it is not in the source text of the page. At the same time, the browser does not bother itself with such things as calculating the space occupied by a block and it is simply impossible to know the height of the block. In visibility: hidden mode, the browser pretends that the block exists, allocate space for it on the page, but simply does not draw it. Here in this mode it is just possible, without showing the block to the user, to find out its dimensions. But just hiding the block from the user is not enough, it is necessary that it still does not occupy space on the page, and here the position: absolute property appears on the scene, which is applied to the block before getting its height. The difference between the height of the block at the end of the animation and its real height is nothing but the difference between the height of the block with position: static and position: absolute.
If we turn on the object inspector in the browser and add the “style =" display: block; position: absolute; "” property to the block to be expanded, we will see the following picture:
It is up to this height that jQuery expands the block. Well, let's try fixing this bug. As you know, the width of an element with position: absolute is limited, unless otherwise specified, the width of the nearest parent with position ≠static. In this case, we need the width of the element to be like that of the direct parent, according to this parent and need to be set position: relative. Again we take into our hands the object inspector, reload the page, add the position: relative property to the div.jq-codeDemo element and click on the Run Code button. Hooray! We just fixed the animation on the main page of the most popular JavaScript framework using one property :)
Of course, one can only thank the jQuery website developers for making such a simple example to my article. In a real situation, you may have to do something else. In general, you should always check the appearing blocks in the inspector, changing the position from static to absolute and make sure that there are no changes in the block size. But it is possible to identify more or less specific rules that need to be checked before the inspector.
Actually, that's all, smooth animation to you, friends. Perhaps next time I will tell you about such a thing as delayed mouse events and when they are useful.
I note that the glitch on this particular page can be seen in all browsers except ie6 and ie7. So, if you click on the Run Code button, we will see the smooth appearance of the “p.neat” block from a transparent state with a zero height and width to about this state:
')
After that, the height of the block jumps sharply to the open state:
It may even seem that the browser “slowed down” for a split second, but the real reason for this behavior is that jQuery does not correctly count the height of the invisible block. But do not rush to shoot a musician, let's try to figure out why this is happening. I note in advance, with this glitch you can almost always cope.
First, let's designate some conditions for the appearance of a glitch: It occurs when we want to “expand” a block that is not previously visible on the page using the functions show (speed), toggle (speed), slideDown () and animate ({height: 'show '}). Obviously, in order to make the animation of the opening of a block, you need to change its height from zero to some height. Moreover, this height must be calculated before the start of the animation. As you know, HTML and CSS provide us with only 2 ways to hide a block, these are display: none and visibility: hidden properties. In the first case, the element simply turns off, as if it is not in the source text of the page. At the same time, the browser does not bother itself with such things as calculating the space occupied by a block and it is simply impossible to know the height of the block. In visibility: hidden mode, the browser pretends that the block exists, allocate space for it on the page, but simply does not draw it. Here in this mode it is just possible, without showing the block to the user, to find out its dimensions. But just hiding the block from the user is not enough, it is necessary that it still does not occupy space on the page, and here the position: absolute property appears on the scene, which is applied to the block before getting its height. The difference between the height of the block at the end of the animation and its real height is nothing but the difference between the height of the block with position: static and position: absolute.
If we turn on the object inspector in the browser and add the “style =" display: block; position: absolute; "” property to the block to be expanded, we will see the following picture:
It is up to this height that jQuery expands the block. Well, let's try fixing this bug. As you know, the width of an element with position: absolute is limited, unless otherwise specified, the width of the nearest parent with position ≠static. In this case, we need the width of the element to be like that of the direct parent, according to this parent and need to be set position: relative. Again we take into our hands the object inspector, reload the page, add the position: relative property to the div.jq-codeDemo element and click on the Run Code button. Hooray! We just fixed the animation on the main page of the most popular JavaScript framework using one property :)
Of course, one can only thank the jQuery website developers for making such a simple example to my article. In a real situation, you may have to do something else. In general, you should always check the appearing blocks in the inspector, changing the position from static to absolute and make sure that there are no changes in the block size. But it is possible to identify more or less specific rules that need to be checked before the inspector.
- If it is possible to set a hard size for the block to be expanded, specify. And the following rules can not read.
- If the size should be a percentage of the parent block, you need to make sure that the closest parent with the position static has the same size as the immediate parent of the object. If this is not the case, you can put the position: relative to the immediate parent. However, if the size should be 100% of the parent, it is better to indicate this explicitly.
- A parent with a position position static should not have horizontal padding. This is due to the fact that for ordinary elements the width of the block is calculated from the parent without padding, and for elements with position: absolute, taking into account.
- After the start of the animation (i.e., after the moment when jQuery has calculated the height), no properties can be changed that can affect the width or height of the parent or animated object.
Actually, that's all, smooth animation to you, friends. Perhaps next time I will tell you about such a thing as delayed mouse events and when they are useful.
Source: https://habr.com/ru/post/72137/
All Articles