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手風琴執行中的抖動

回答

相關問題