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

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

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

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

источник

2011-01-27 Greg

Простым решением является проверка вычисленной высоты элемента тела перед закрытием складного элемента, а затем заданная вычисленная высота тела как свойство высоты 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); 
});

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

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

источник

2011-01-28 22:57:39 conceptlogic

Это работает ... но я все еще путаюсь, почему. Он явно устанавливает высоту тела на текущую высоту ... так как это контролирует мерцание? Остановит ли jQuery отступ в высоту, вызвав мерцание? – Greg

Перед открытием складного элемента (или панели) корпус обычно не имеет высоты. Когда панель открыта, тело должно отрегулировать, чтобы выполнить перерисовку. Когда панель снова закрывается, корпус снова настраивается на первоначальную высоту. Проблема возникает, когда пользователь прокручивается, когда панель открыта. Я предполагаю, что мерцание происходит потому, что браузер не может сохранить предыдущую позицию прокрутки, а также перерисовку пользовательского интерфейса. – conceptlogic

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

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

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

источник

2011-01-27 20:22:52 Michael

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

ответ

Смежные вопросы