All geek questions in one place

JQuery flickers on slideUp () in all browsers ... sample page attached

I know this has been discussed several times, but I have a problem that is slightly different. when .slideUp () is called, and the browser wind scrolls down to see all the bottom content, it blinks repeatedly when the div slides.

Below is the page below, just click where it is written, then slide down and close one of the top sections.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>This is the title</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js" type="text/javascript"></script>
        <script  type="text/javascript">
        $(document).ready(function() {

                    $('div.Accordion > div.Content').click(function() {
                        $(this).prev('div.collapsePanelHeader').slideDown(1000);
                        $(this).slideUp(1000);
                    });

                    $('div.Accordion > div.collapsePanelHeader').click(function() {
                        $(this).slideToggle(1000);
                        $(this).next('div.Content').slideToggle(1000);
                    });

                    $('div.Accordion > div.collapsePanelHeader2').click(function() {
                        $(this).toggleClass('accordionHeaderSelected','accordionHeader');
                        $(this).next('div.Content2').slideToggle(1000);
                    });

                });
        </script>
        <style type="text/css">
            .Accordion
            {
                font-size: .9em;
                background-color: #ebebeb;
                border: solid 2px #ccc;
                padding: 5px 10px;
                width: 500px;
            }
            p
            {
                font-size: 1em;
            }
            .collapsePanelHeader
            {
            }
            .HeaderContent
            {
                background-color: #ebebeb;
            }
            .Content
            {
                background-color: #fff;
                border: solid 1px #ccc;
                padding: 10px;
            }
            .accordionHeaderSelected
            {
                border: solid 1px #ccc;
                background-color: #EBEBEB;
                margin-bottom: 10px;
            }
            .accordionHeader
            {
                border: none;
                background-color: #EBEBEB;
                margin-bottom: 10px;
                text-decoration: none;
            }
            .collapsePanelHeader2
            {
            }
            .HeaderContent2
            {
                background-color: #ebebeb;
            }
            .Content2
            {
                background-color: #ebebeb;
                padding-left: 30px;
            }
            .gvCSections
            {
                padding-top: -10px;
            }
            .gvCSections tr td
            {
                padding: 5px;
            }
        </style>
    </head>
    <body>
        <div class="Accordion">
            <h2>Title Goes Here</h2>
            <hr style="border-top: none; border-bottom: 1px solid #999999;" />
            <div class="collapsePanelHeader">
            Click here Click here Click here Click here Click here Click here Click here Click here Click here Click here Click here Click here
                ... <span style="font-size: x-small; font-weight: bold; cursor: pointer; text-decoration: underline;">click for more</span>
            <br /><br /><br />
            </div>
            <div class="Content" style="display: none;">
            <div class="collapsePanelHeader3 accordionHeaderSelected">
                CourseDescription
            </div>
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    <br />
                    <strong>For more information, contact</strong>:
                    <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />

                    <strong>To enroll</strong>:
                    <br />
                    Click on a link below and complete the registration form.
            </div>
            <div class="collapsePanelHeader2 accordionHeader">
                <b>Click on this line</b>
            </div>
            <div class="Content2 accordionContent" style="display: none;">
                    <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
            </div>

            <h2>Title Goes Here</h2>
            <hr style="border-top: none; border-bottom: 1px solid #999999;" />
            <div class="collapsePanelHeader">
                Click here Click here Click here Click here Click here Click here Click here Click here Click here Click here Click here
                ... <span style="font-size: x-small; font-weight: bold; cursor: pointer; text-decoration: underline;">click for more</span>
                <br /><br /><br />
            </div>
            <div class="Content" style="display: none;">
            <div class="collapsePanelHeader3 accordionHeaderSelected">
                CourseDescription
            </div>
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    <br />
                    <strong>For more information, contact</strong>:
                    <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />

                    <strong>To enroll</strong>:
                    <br />
                    Click on a link below and complete the registration form.
            </div>
            <div class="collapsePanelHeader2 accordionHeader">
                <b>Click on this line</b>
            </div>
            <div class="Content2 accordionContent" style="display: none;">
                    <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
            </div>

            <h2>Title Goes Here</h2>
            <hr style="border-top: none; border-bottom: 1px solid #999999;" />
            <div class="collapsePanelHeader">
            Click here Click here Click here Click here Click here Click here Click here Click here Click here Click here
                ... <span style="font-size: x-small; font-weight: bold; cursor: pointer; text-decoration: underline;">click for more</span>
                <br /><br /><br />
            </div>
            <div class="Content" style="display: none;">
            <div class="collapsePanelHeader3 accordionHeaderSelected">
                CourseDescription
            </div>
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    <br />
                    <strong>For more information, contact</strong>:
                    <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />

                    <strong>To enroll</strong>:
                    <br />
                    Click on a link below and complete the registration form.
            </div>
            <div class="collapsePanelHeader2 accordionHeader">
                <b>Click on this line</b>
            </div>
            <div class="Content2 accordionContent" style="display: none;">
                    <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
                    Content Content                <br />
            </div>
        </div>
    </body>
</html>
+3
source share
2 answers

An easy fix is ​​to check the calculated height of the body element before closing the discardable element, and then set the calculated body height as a property of the CSS height.

$('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);
 });

, reset/ .

, CSS reset auto, jQuery , .

+3

, , . , , , , / . , .

, , , , , , .

P.S.: , .

0

Source: https://habr.com/ru/post/1788315/

More articles:


All Articles