jQuery мерцает на slideUp () во всех браузерах ... образец страницы прилагается - PullRequest
Новая
       5

jQuery мерцает на slideUp () во всех браузерах ... образец страницы прилагается

3 голосов
/ 27 января 2011

Я знаю, что это обсуждалось несколько раз, но у меня есть немного другая проблема. Когда вызывается .slideUp () и прокручивается окно браузера, чтобы увидеть весь нижний контент, он мигает много раз, когда div скользит в закрытом состоянии.

Пример страницы ниже, просто нажмите там, где он говорит, затем сдвиньте вниз и закройте один из верхних делителей. 

    <!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>

Ответы [ 2 ]

3 голосов
/ 29 января 2011

Простое решение - проверить вычисленную высоту элемента body перед закрытием сворачиваемого элемента, а затем установить вычисленную высоту тела в качестве свойства CSS-высоты. 

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

Это заставляет элемент body сохранять свою высоту, даже при закрытии высокой панели, которая обычно сбрасывает / перерисовывает тело на прежнюю высоту по умолчанию.

Также обратите внимание, что перед проверкой вычисленной высоты высота CSS сбрасывается на auto , в противном случае jQuery обходит вычисленный стиль и использует значение, установленное во время предыдущего прохода.

0 голосов
/ 27 января 2011

Вы пытались определить, прокручивается ли окно, и центрировать или перемещать окно. Это происходит только тогда, когда окно прокручивается полностью вниз, а содержимое уменьшается, поэтому вам больше не нужно прокручиваться, полоса прокрутки / окно изменяется по высоте и начинает мерцать. Но я думаю, это может быть немного излишним.

Еще одна идея, которая только что всплыла в моей голове, вы можете попытаться определить, находится ли она в нижней части экрана, и просто добавить контейнер, который будет содержать общую высоту экрана, это должно исправить мерцание, которое у вас будет пустое место внизу страницы.

П.С .: Если вы найдете хорошее решение этой проблемы, мне было бы очень интересно услышать это.

...