jQuery：自定義水平手風琴寬度問題

Question

我試圖創建自定義水平手風琴風格展示。在實際功能方面，我有框架（可以在這裏看到）：

http://www.jsfiddle.net/adrianjacob/UdUus/

但是我的主要錯誤熊（和客戶端）是，如果你看一下右手邊，有隨着寬度向上和向下動畫，總是輕微移動/閃爍。

理想情況下，我希望它看起來平滑，所以只有開幕式/閉幕式有移動。

任何意見將不勝感激。

A.

Answer 1

使用animate功能的step（它不是有據可查）......我已經更新了demo

var panels = $('#promo li'); 

panels.hoverIntent(

function() { 
    if (!$(this).is('.expanded') && !panels.is(':animated')) { 
     $(this).animate({ 
      width: 200 
     }, { 
      // width is the calculated width, ani is the animation object 
      step: function(width, ani) { 
       var w = Math.floor(width); 
       // use 250 so we end up with 50 as the reduced size 
       $('.expanded').css('width', (250 - w) + 'px'); 
       $(ani.elem).css('width', (200 - w) + 'px'); 
      }, 
      duration: 500, 
      complete: function() { 
       panels.removeClass('expanded'); 
       $(this).addClass('expanded'); 
      } 
     }); 
    } 
}, function() {}); 

類似的方法在Kwicks使用插入。

Answer 2

你可以嘗試this plugin可能已經想通了這個bug。提供的例子太實際了。

你玩過jQuery UI緩動嗎？

Answer 3

您也可以嘗試在div打開時停止該事件。

與解釋該網站是：http://api.jquery.com/stop/