Джиттер в Jquery Аккордеонной Реализации - PullRequest
Новая
       1

Джиттер в Jquery Аккордеонной Реализации

1 голос
/ 13 января 2010

Пожалуйста, ознакомьтесь с http://jsbin.com/omuqo для демонстрации этой проблемы.

Когда вы открываете панель нажатием на ручку, панели ниже слегка дрожат на протяжении анимации.

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

Для отладки я отказался от плагина аккордеона в Jquery UI и реализовал свой собственный, следуя совету здесь .

Вот полный код, если jsbin не работает.

HTML: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<title>Sandbox</title> 
<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
<style type="text/css" media="screen"> 
* { margin: 0; padding: 0; } 
body { background-color: #fff; font: 16px Helvetica, Arial; color: #000; } 
dt { background-color: #ccc; } 
dd { height: 100px; } 
#footer { background-color: #ff9; } 
</style> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> 
</head> 
<body> 
  <dl> 
    <dt>Handle</dt> 
    <dd id="1">Content</dd> 
    <dt>Handle</dt> 
    <dd id="2">Content</dd> 
    <dt>Handle</dt> 
    <dd id="3">Content</dd> 
    <dt>Handle</dt> 
    <dd id="4">Content</dd> 
  </dl> 
  <div id="footer"> 
    Some more content 
  </div> 
</body> 
</html>

И Javascript: 

$.fn.accordion = function() {
  return this.each(function() {
    $container = $(this);

    // Hijack handles.
    $container.find("dt").each(function() {
      var $header = $(this);
      var $content = $header.next();

      $header
        .click(function() {  
          $container
            .find("dd:visible")
            .animate({ height: 0 }, { duration: 300, complete: function() {
                $(this).hide();
              }
            });
          if(!$content.is(":visible")) {
            $content
              .show()
            $content
              .animate({ height : heights[$content.attr("id")] }, { duration: 300 });
          }
          return false;
        });
    });

    // Iterate over panels, save heights, hide all.
    var heights = new Object();
    $container.find("dd").each(function() {

      $this = $(this);
      heights[$this.attr("id")] = $this.height();
      $this
        .hide()
        .css({ height : 0 });
    });
  });
};

$(document).ready(function() {
  $("dl").accordion();
});

Чтобы увидеть гладкую реализацию аккордеона, зайдите на домашнюю страницу Muxtape .

Любой совет?

Ответы [ 2 ]

3 голосов
/ 14 января 2010

Кажется, у меня есть решение. Синхронизируйте путем привязки к независимому внешнему переходу посредством обратного вызова шага. Здесь - демонстрация нового метода.

Это была настоящая головная боль!

JavaScript: 

$.fn.accordion = function() {
  return this.each(function() {
    $container = $(this);

    // Hijack handles.
    $container.find("dt").each(function() {
      var $header = $(this);
      var $selected = $header.next();

    $header
        .click(function() {  
          if ($selected.is(":visible")) {
            $selected
              .animate({ height: 0 }, { duration: 300, complete: function() {
                $(this).hide();
              }
            });
          } else {
            $unselected = $container.find("dd:visible");
            $selected.show();
            var newHeight = heights[$selected.attr("id")];
            var oldHeight = heights[$unselected.attr("id")];

            $('<div>').animate({ height : 1 }, {
              duration  : 300, 
              step      : function(now) {
                var stepSelectedHeight = Math.round(newHeight * now);
                $selected.height(stepSelectedHeight);
                $unselected.height(oldHeight + Math.round((newHeight - oldHeight) * now) - Math.round(newHeight * now));
              },
              complete  : function() {
                $unselected
                  .hide()
                  .css({ height : 0 });
                }
            });
          }
          return false;
        });
    });

    // Iterate over panels, save heights, hide all.
    var heights = new Object();
    $container.find("dd").each(function() {

      $this = $(this);
      $this.css("overflow", "hidden");
      heights[$this.attr("id")] = $this.height();
      $this
        .hide()
        .css({ height : 0 });
    });
  });
};

$(document).ready(function() {
  $("dl").accordion();
});
0 голосов
/ 13 января 2010

Похоже, это связано с тем, что две параллельные анимации (одна панель выходит, а другая движется в сторону) в аккордеоне не синхронизированы.

По-видимому, на данный момент не существует установленного способа синхронизации анимации в Jquery.

См. здесь и здесь для получения дополнительной информации.

расстраивает!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...