jqueryのanimate（）はページフローとオーバーフロープロパティにどのように影響しますか？

Question

こんにちは、私はちょうど私の最初のxhtml/cssの本を読んで終わり、今はjavascript/htmlの真ん中にいます。私は非常にシンプルな効果を作りたいと思うが、私はjquery（とその問題についてはjavascript）に慣れていないので、それを理解することはできない。

だから、僕は、このような効果をしたいと思います：kk.pcriot.com/websites.html

画像が動き回る

が、そのホルダーが所定の場所に固定されているがされるように、それは境界線のまわりに「マスク」の一種であり、マウスで画像を移動します（以上）。マウスカーソルがその上を浮かび上がっていなければ、イメージは元の場所にスナップバックされますが、それは十分に簡単なようです。今私はそのマスクを作成する方法を理解しようとしています....静的な画像とoverflow:hiddenプロパティで十分にシンプルですが、私はオーバーフローを得ることができないので、animate()は、働くたぶんそれはpositionプロパティにも関係します。ここで

私のコードです：

CSS：

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) 
    /> 

これはアニメーション化しますが、オーバーフロープロパティは機能しません。スクリプトを取り出すと、オーバーフロープロパティは機能しますが、明らかにアニメーションは機能しません！

Answer 1

はホバー上の画像を移動すると、CSSをクリーンアップするためにjsfiddleを更新しました。 http://jsfiddle.net/Q4zXd/3/

画像がコンテナに収まるようにするには、画像をコンテナに入れる必要があります。また、その一部を非表示にして、その領域の上にマウスを移動すると表示されます。

コンテナを相対的に配置する必要がある理由は、ウィンドウではなく、包含要素に対する絶対位置自体に配置される内部要素（img）を作成するためです。デフォルトでは、絶対に配置された要素はドキュメントフローから取り出され、包含要素が相対的に配置されていない限り（絶対的にも機能しますが、その要素はもはや文書内に存在しない限りフロー）

Answer 2

overflow: hidden 

親が絶対位置も持っている場合のみ、あなたのケースでのみ動作します。 @ Sparky672のコメントにも注意してください。イメージはdiv内にある必要があります。

私はあなたのためのデモを設定しました：

http://jsfiddle.net/Q4zXd/