jquery의 animate()는 페이지 흐름과 오버플로 속성에 어떤 영향을 줍니까?

Question

안녕 얘들 아, 이제 방금 첫 번째 xhtml/css 책을 읽었고 지금은 javascript/html 중 하나에있다. 아주 간단한 효과를 만들고 싶지만 jquery (자바 스크립트)에 익숙하지 않기 때문에 알아낼 수 없습니다.

그래서 난 그냥이 같은 효과를 싶습니다 kk.pcriot.com/websites.html

이미지 주위에 이동

하지만 홀더가 제자리에 고정되어 있지만 있도록 국경의 주위에 "마스크"의 종류가 마우스의 이미지 이동 (위에). 마우스 커서가 커서를 가리키지 않아도 이미지가 원래 위치로 되돌아 가야하지만 간단하게 보입니다. 방금 그 마스크를 만드는 방법을 알아 내려고 노력 중입니다 ... 정적 이미지와 overflow:hidden 속성을 사용하면 충분히 간단하지만 오버플로를 얻을 수 없기 때문에 animate()이 요소를 흐름 밖으로 가져옵니다. 일하다. 어쩌면 position 속성과 관련이있을 수도 있습니다. }

스크립트,

div { width : 100px; height: 100px; 
    border: thin solid red; 
    overflow:hidden; 
    } 

img { position:absolute; 
height: 200px; 
width: 300px; 

:

<script src="jquery-1.7.2.js"></script> 
<script> 
$(document).ready(function(){ 

$("#clickme").click(function() { 
    $("#book").animate({ 

    left: '+=150', 

    } 
}); 

몸 :

<div id="clickme"> 
    Click here 
</div> 
<image id="book" src="../Images/test.jpg" (Newbs cant post images so I didnt use IMG) 
    /> 

CSS : 여기

내 코드입니다

그래서 ... 애니메이션 효과는 있지만 오버플로 속성이 작동하지 않습니다. 그리고 스크립트를 꺼내면 오버 플로우 속성이 작동하지만 분명히 애니메이션이 작동하지 않습니다!

Answer 1

은 호버에 이미지를 이동하고 CSS를 정리하기 위해 jsfiddle 업데이트되었습니다. http://jsfiddle.net/Q4zXd/3/

이미지가 컨테이너보다 커야하고 이미지의 일부가 숨겨져 있고 그 영역 위로 마우스를 이동하면보기로 이동하려면 이미지가 있어야합니다.

컨테이너를 상대적으로 배치해야하는 이유는 내부 요소 (img)가 윈도우가 아닌 포함 요소를 기준으로 절대 위치에 배치되도록하기 위해서입니다. 기본적으로 절대적으로 배치 된 요소는 문서 흐름에서 꺼내어 포함하는 요소가 상대적으로 배치되지 않는 한 절대적으로 작동하지만 그 요소는 문서에 더 이상 존재하지 않는 한 포함 요소가 아닌 창에 상대적으로 배치됩니다 흐름)

Answer 2

overflow: hidden 

부모님도 절대 위치를 갖고있는 경우에만 작동합니다. @ Sparky672의 의견에도주의하십시오. 이미지는 div 안에 있어야합니다.

나는 당신을 위해 데모를 설정 한 :

http://jsfiddle.net/Q4zXd/