매끄러운 JQuery 너비 변경

Question

형제가이 크기 증가를 위해 공간을 제공하는 동안 hovered 블록이 커지는 메뉴에 애니메이션을 적용하려고합니다. 모든 블록이 함께 전체 창 너비를 차지하고 있습니다.

몇 가지 기본 Jquery를 사용하여 성공적으로 수행했지만 그 결과는 다소 복잡합니다. 가장 오른쪽 사업부는 모든 계산을 앓고과 반올림 :

var width = $(window).width() - 44; 
var blockwidth = width/12; 
var blockwidthLarge = blockwidth+154; 
var blockwidthSmall = blockwidth-14; 
$('.headerblock').css('width',blockwidth+'px').hover(function() 
    { 
     $(this).siblings().stop(false,false).animate({width: blockwidthSmall},300); 
     $(this).stop(false,false).animate({width: blockwidthLarge},300); 

    },function() 
    { 
     $(this).siblings().stop(false,false).animate({width: blockwidth},300); 
     $(this).stop(false,false).animate({width: blockwidth},300); 

    }); 

이 작업 jsfiddle이다 (나는 효과의 가시성을 높이기 위해 더 큰 뭔가를 미리 프레임의 크기를 조정하는 것이 좋습니다) :

jsfiddle

박스를 안정적으로 보이게하려면 어떻게 향상시킬 수 있습니까? 어쩌면 이것은 이미 개발 된 것일까? 웹 사이트는 IE8 +와 호환되어야하므로 멋진 CSS 규칙을 사용할 수 없습니다.

Answer 1

hoverIntent에 의해 Brian Cherne이라는 jQuery 플러그인이있어 문제를 해결할 수 있습니다.

기본적으로 사용자가 실제로 가져 가야한다는 생각을하면 호버 이벤트가 발생하는 것입니다. 작은은 원래보다 유동적이지만 시간이 많이 걸리고 멋지게 보입니다. 여기

는 "외부 자원"에서 추가 된 플러그인 바이올린과에 ".hoverIntent"

http://jsfiddle.net/Matze/c4uyR/1/

var width = $(window).width() - 44; 
var blockwidth = Math.round(width/12); 
var blockwidthLarge = blockwidth + 154; 
var blockwidthSmall = blockwidth - 14; 
$('.headerblock').css('width', blockwidth + 'px').hoverIntent(function() 
{ 
    $(this).siblings().stop(false, false).animate({ 
     width: blockwidthSmall 
    }, 300); 
    $(this).stop(false, false).animate({ 
     width: blockwidthLarge 
    }, 300); 

}, function() { 
    $(this).siblings().stop(false, false).animate({ 
     width: blockwidth 
    }, 300); 
    $(this).stop(false, false).animate({ 
     width: blockwidth 
    }, 300); 

});