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/