jQuery 슬라이드/바운스 div를 오른쪽 위로 가져 오기

Question

jQuery를 처음 사용했지만이 문제를 해결하려고했습니다.

내가 가진 것은 콘텐츠 상자 목록입니다. 각 상자를 가리키면 div가 세부 정보 (디자이너가 '바운스 (bounce)'효과를 원할 것임)와 함께 오른쪽에서 밀어 넣고 마우스를 가리면 숨 깁니다.

프로젝트에 이미 jQueryUI에 대한 액세스 권한이 있습니다.

HTML을 각 상자 내가

$(".show").hover(function(){ 
     $(this).closest("div").find(".tool_hover").toggle(); 
    }, function(){ 
     $(this).closest("div").find(".tool_hover").toggle(); 
    }); 

작동/숨기기를 보여주기 위해 JQuery와 스크립트를 생성

<div class="tool_master show"> 
    <div class="tool_hover"> Hover information here </div> 
    <div class="tool_box" > Content here </div> 
</div> 

CSS

.tool_box { 
    height:100px; 
    width:460px; 
    position:relative; 
    } 
.tool_hover { 
    height:100px; 
    width:460px; 
    background:#525051; 
    position:absolute; 
    z-index:100; 
    display:none; 
} 

: 여기

는 내가 지금까지 무엇을 가지고

이것은 e 일은 끝났지 만 디자이너가 원하는 "경험"을 제공하지는 않습니다.

오른쪽에서 빠르게 밀어 넣고 바운스 효과가있을 수 있습니다. 종료시 오른쪽으로 밀어냅니다. 나는 jquery animation에 정통한 사람이 아닙니다.

누군가 나를 도울 수 있습니까?

미리 감사드립니다.

Answer 1

원하는 것은 animate입니다. 토글을 animate로 바꾸고 (속성, 기간, 여유, 콜백 기능)에 대한 매개 변수를 입력하십시오.

코드와 함께 작동 시키려면 몇 가지 사항을 변경하거나 추가해야합니다. 먼저, tool_hover에서 display : none을 제거하십시오. 대신 .show 상자 밖에서 위치를 지정하여 숨길 것입니다. 그런 다음 .show의 오버플로를 숨김으로 설정하십시오. 당신의 CSS로

:

.show { 
    overflow:hidden; 
    position:relative; /* Otherwise the absolute positioned child element ignores overflow */ 
} 
.tool_hover { 
    z-index: 0; /* Take precedence over .tool_box */ 
    left: 500px; /* Starting position is outside .show , effectively hidden */ 
} 
.tool_box { 
    z-index: 1; /* So hover will cover this box */ 
} 

다음으로, 우리는 애니메이션과의 토글 기능을 대체합니다.) (

... 
.animate({ 
    'left' : '0px'}, 
    'slow'); 

두 번째 토글 : 당신이 상자 위에 마우스를 올려 때, 우리는 간단히과) (첫 번째 .toggle을 대체 다시 0으로 설정에 의해 다시 왼쪽으로 위치를 제공하기 위해 .tool_hover 클래스를 말할 것이다 로 : 여기

... 
.animate({ 
    'left' : '0px'}, 
    'slow');