jQuery로 호버 천이

이 코드에 어떻게 천이를 추가 할까하고 궁금합니다.jQuery로 호버 천이

$("#navContainer").hover(function(){ 
    $("#navContainer").css("height","auto"); 
    },function(){ 
    $("#navContainer").css("height","74px"); 
});

잠시 동안 웹을 검색했지만 간단한 해결책을 찾을 수 없었습니다. jQuery를 처음 사용했습니다. 여기 내가하려고하는 것이 exactly입니다.

출처

2013-07-06 Jeremy Blazé

http://api.jquery.com/animate/ – undefined

@undefined 죄송합니다,하지만 난 여전히 작동하도록 할 수 없습니다. 보여줄 수 있니? –

@undefined 감사! 그것이 바로 내가 원하는 것입니다. 완벽하게 작동했습니다. –

나는 당신이 원하는 것을 수행하는 JSFiddle을 만들었습니다. 그것에 대한 좋은 점은 표준 HTML과 CSS3 전환이 필요하다는 것입니다.이 전환은 매우 빠르며 거의 모든 브라우저에서 전환 작업을 수행 할 CSS3 심이 많이 있습니다. 내가 한 것은 <a> 요소가 div의 컨테이너로되어있어 모든 내용을 내부에 넣을 수 있으며 녹색 배경에서 마우스를 가져 가면 텍스트 전환의 높이와 색상이 부드럽고 멋지게 보입니다 .

출처

2013-07-06 04:39:07

이것을 만들어 주셔서 감사합니다.하지만 CSS3 전환을 사용할 수 있다는 것을 알고 있습니다. 전환에 jQuery를 사용하는 이유는 74 픽셀의 고정 높이에서 자동 높이로 이동하고 CSS3 전환이 발생하지 않기 때문입니다. 이 일을하지 마라. –

나는 나의 대답에 약간의 조정을했고, 나의 이전의 부주의 한 것에 대하여 유감스럽게 생각한다. mouseenter 및 mouseleave 이벤트 인 경우 모두 animate을 사용할 수 있습니다. 그러나 불행하게도, animate이 {"height": "auto"} 표현 몇 가지 문제가있다, 그래서 그것을 해결하기 위해이 하나 발견 : JavaScript jQuery Animate to Auto Height

http://jsfiddle.net/tVxNc/1/

$("#navContainer").hover(function(){ 
    var $navContainer = $("#navContainer"); 
    var $defaultHeight = $navContainer.height(); 
    var $autoHeight = $navContainer.css('height', 'auto').height(); 
    $("#navContainer").css('height', $defaultHeight).animate({"height": $autoHeight}, 400, 'swing'); 
}, function(){ 
    $("#navContainer").animate({"height": "80px"}, 400, 'swing'); 
});

출처

2013-07-06 04:40:31 Melkor

그게 내가 원하는 것에 가깝지만 작동하지 않는 것 같습니다. 나는 당신에게 모든 것을 보여주기 위해 [피들] (http://jsfiddle.net/tVxNc/)을 만들었습니다. –

@ JeremyBlazé 죄송합니다. '{ "height": "74px"}' – Melkor

$('#navContainer').hover(function(){ 
    $(this).animate({ 
    height: $(this)[0].scrollHeight+'px' 
    }, 400); 
}, function(){ 
    $(this).animate({ 
    height: 'auto' 
    }, 400); 
});

내가 다른 토론에서 그것을 발견을에 (@undefined 권장) 종료. 도움을 주셔서 감사합니다 :)

출처

2013-07-06 04:47:54

jQuery로 호버 천이

답변

관련 문제