jQuery flicker on slideUp() in all browsers … sample page attached

一世执手 提交于 2019-12-04 13:12:50

An easy fix is to check the computed height of the body element before closing a collapsible element, then set the body's computed height as its CSS height property.

$('div.Accordion > div.collapsePanelHeader').click(function() {

    var body = $('body');
    body.css('height', 'auto');
    body.css('height', body.height());

    $(this).slideToggle(1000);
    $(this).next('div.Content').slideToggle(1000);
 });

This forces the body element to maintain its height, even when closing a tall panel that would normally reset/redraw the body to its earlier default height.

Note also that before checking the computed height, the CSS height is reset to auto, otherwise jQuery bypasses the computed style and uses the value set during the previous pass.

Michael

Did you try detecting if the window is scrolled and centering or moving the window. This only happens when the window is scrolled all the way down and the content get smaller so you don't need to scroll anymore, the scroll bar / window is changing in height and starts to flicker. But i guess this might be a bit of an overkill.

Another idea that just popped in my head, you could try to detect if your at the bottom of the screen and just add a container that will hold the total height of the screen, this should fix the flickering you will end up having a blank space at the bottom of the page.

P.S.: if you find a good solution to this problem i would be very interested to hear it.

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!