動畫擴大回旋

在此菜單中，德徘徊DIV擴大和大小的改變，這實在是煩人當所有其他元素都在萎縮動畫擴大回旋

沒有在菜單的右側有一個小擺動

我見過這個：Expand div from the middle instead of just top and left using CSS 從中心擴展，他們還提到了擺動

有沒有辦法解決擺動？

這是我的代碼

，你可以看到速度總是相同的，所以有不應該在理論上是一個擺動

function add() { 
    var speed = 50; 
    $('.space').hover(
     function() { 
      var n = this.id.replace(/[^\d]/g, ''); 
      $('#space_' + n).removeClass('contract'); 
      $('#space_' + n).stop().animate({ 
       height: "107px", 
       width: "107px", 
      }, speed, 'linear'); 
      $('.contract').stop().animate({ 
       height: "73px", 
       width: "70px", 
      }, speed, 'linear'); 
     }, 
     function() { 
      var n = this.id.replace(/[^\d]/g, ''); 
      $('#space_' + n).addClass('contract'); 
      if($('#space_' + n).hasClass('selected') != true) { 
       $('#space_' + n).stop().animate({ 
        height: "73px", 
        width: "73px", 
       }, speed, 'linear'); 
      } 
      $('.contract').stop().animate({ 
       height: "73px", 
       width: "73px", 
      }, speed, 'linear'); 
     } 
    ); 
} 

add();

在這裏你可以看到菜單的例子：http://mellroy.com/dean/

感謝您提前

來源

2011-12-30 Mellroy

請注意，如果您一次只移動兩個元素，就沒有擺動，因爲它們的動畫和大小將同步。我認爲問題在於當你交換三個或更多的項目時，可能是由以下原因之一引起的：1）多個動畫不能在每一幀合適地疊加2）可能不是幀和鼠標回調的完美對齊，所以多個動畫暫時不會加起來。我對jQuery中動畫/鼠標甚至代碼的工作方式並不十分熟悉，所以不確定他們做了什麼保證。 – 2011-12-30 01:01:05

我在想不幸的是，最簡單的保證解決方案是手動計算所有尺寸並自己動畫每個項目，並將它們作爲一個整體進行評估。其他任何事情都將依賴完美的鼠標事件/動畫同步。 – 2011-12-30 01:02:15

其實從來沒有關注過這兩個元素。如果您將鼠標快速移入和移出單個項目的字段，也會發生這種情況。但我仍然認爲手動計算所有職位，並將項目設置爲「絕對」，「固定」或「相對」，而不是讓佈局引擎爲您工作，這將是唯一可靠的解決方案。 – 2011-12-30 01:07:35

擺脫邊界 - 而是使用背景圖像。如果將整個菜單放在白色和黑色背景上（與菜單相匹配），雖然擺動仍然存在，但您不會看到搖擺事件。我懷疑你將能夠避免它。

來源

2011-12-30 08:37:59 Innate

動畫擴大回旋

回答

相關問題