フェード画像位置

Question

私はこのようなリストを持っています。

高さの最初の300ピクセルはマウス出力イメージであり、最後の300ピクセルはフェードオーバーしたいマウスオーバーイメージです。これは可能ですか？

私は示すために、どのようなイメージを制御するために、このCSSを持っている：

ul { list-style: none; padding: 0; margin: 0; } 
ul li { width: 950px; height: 300px; overflow: hidden; position: relative; } 
ul li img { 
    display: block; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

このコードは、単に、画像の最後の300個のピクセルを上に移動しではなく、それを移動する私は上の画像をフェード不透明度にしたいです"その他"：

<script type="text/javascript"> 
     $(document).ready(function() { 
      $("ul li img").mouseover(function() { 
       $(this).stop().animate(
        { top: "-300px" }, 
        { duration: 300 }) 
      }) 
      .mouseout(function() { 
       $(this).stop().animate(
        { top: "0" }, 
        { duration: 300 }) 
      }) 
     }); 
    </script> 

Answer 1

これを実装し終わったところで、素敵で妥当な短い練習をしてくれてありがとうございます。

First off, see the end result here。

実装ノート：

1. 可能場合は、あなたのマークアップを変更することを検討してください。これはスタンドアロンのimg要素ではなくbackground-imageというイメージを使用した方が、はるかに簡単になりました（私は些細なことを言っています）。
2. 解決策は、img要素ごとに「姉妹」divを追加し、適切にスタイルを設定することによって機能します。最も重要なのは、background-imageプロパティを設定することです。これにより、画像の目的の半分だけを表示することができます。
3. 解決策は、solution presented hereを使用してソース画像のサイズを動的に計算する必要があります。

Answer 2

私は考えていると思います。作業例：

http://jsfiddle.net/avall/RMWt8/1/

ソリューションはoverflowスタイルを使用し、層（z-index）で遊びます。

マウスを下から上に動かすときに中心線のバグがあるため、若干アップグレードする必要がありますが、そのことを知っておく必要があります。