Lavalamp jQuery 플러그인을 드롭 다운 메뉴와 함께 사용 하시겠습니까?

jQuery Lavalamp plugin에 문제가 있습니다. 단일 레벨 메뉴에서 완벽하게 작동하지만 드롭 다운을 추가하면 약간의 손실이 발생합니다. 그 뜻은 다음과 같습니다 : http://screenr.com/0fS.Lavalamp jQuery 플러그인을 드롭 다운 메뉴와 함께 사용 하시겠습니까?

물론 달성하고자하는 것은 lavalamp 배경이 사용자가 하위 항목을 가리키면 포트폴리오 항목에 머무르는 것입니다.

플러그인을 약간 변경하는 것이므로 여기 플러그인의 전체 코드가 나와 있습니다. 필요한 것은 <li>의 아이들이 공중에 갇혀있을 때 lavalamp을 현 단계에서 멈추게 한 다음에 정상적으로 돌아가는 간단한 방법입니다. 다음은 참조 용 전체 플러그인 코드입니다!

(function($) { 
$.fn.lavaLamp = function(o) { 
o = $.extend({ fx: "linear", speed: 500, click: function(){} }, o || {}); 

return this.each(function() { 
    var me = $(this), noop = function(){}, 
     $back = $('<li class="back"><div class="left"></div></li>').appendTo(me), 
     $li = $("li", this), curr = $("li.current", this)[0] || $($li[0]).addClass("current")[0]; 

    $li.not(".back").hover(function() { 
     move(this); 
    }, noop); 

    $(this).hover(noop, function() { 
     move(curr); 
    }); 

    $li.click(function(e) { 
     setCurr(this); 
     return o.click.apply(this, [e, this]); 
    }); 

    setCurr(curr); 

    function setCurr(el) { 
     $back.css({ "left": el.offsetLeft+"px", "width": el.offsetWidth+"px" }); 
     curr = el; 
    }; 

    function move(el) { 
     $back.each(function() { 
      $(this).dequeue(); } 
     ).animate({ 
      width: el.offsetWidth, 
      left: el.offsetLeft 
     }, o.speed, o.fx); 
    }; 

}); 
}; 
})(jQuery);`

미리 감사드립니다.

출처

2010-01-05 Justine