Jquery手风琴执行中的抖动

请查看http://jsbin.com/omuqo了解此问题的演示。Jquery手风琴执行中的抖动

当您通过单击手柄打开面板时，整个动画中的面板会略微抖动。

在演示中，由于所有面板的高度相同，下面的面板应该保持完全静止。当您使用不同高度的面板制作更复杂的手风琴时，可以添加缓动等等，抖动仍然以各种方式显示。

为了调试，我放弃了Jquery UI中的手风琴插件并实施了我自己的，遵循here的建议。

下面是完整的代码，如果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主页。

有什么建议吗？

来源

2010-01-13 Hakan Ensari

我在Safari，Chrome浏览器，IE8和Firefox测试，我看不到任何抖动 - 没有副作用的。 – queen3 2010-01-13 13:21:04

打开面板，然后在滑出另一面板时观看黄色的页脚。它不应该移动，但它确实如此。 – 2010-01-13 13:38:33

看来我有一个解决方案。通过步骤回调与挂钩进行独立的外部转换同步。 Here是新方法的演示。

这真是头疼！

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

来源

2010-01-13 21:55:05

你好，如果你可以看看它，我有一个关于这个问题的后续主题？ http://stackoverflow.com/questions/5266849/problem-with-jquery-accordian-and-jitter-modification – Paul 2011-03-15 20:18:01

看起来这与手风琴中两个并行动画（一个面板出来和其他移动方式）不同步的事实有关。

显然现在还没有确定的方法来同步Jquery中的动画。

有关更多信息，请参阅here和here。

令人沮丧！

来源

2010-01-13 13:40:43

Jquery手风琴执行中的抖动

回答

相关问题