0

http://jonesonter.notomato.com.au/を参照してください。

画像のスタックの上に配置されたいくつかのリスト要素にカーソルを合わせると、単純なフェード効果が書き込まれます。これらの画像はすべて絶対に重なり合っています。

$("#homeNav li").hover(function(){
    //make a variable and assign the hovered id to it
    var elid = $(this).attr('id');
    //hide the image currently there
    $("div#homeImages div").hide();
    //fade in the image with the same id as the selected buttom
    $("div#homeImages div#" + elid + "").fadeIn("slow");

    });

ただし、Internet Explorer では動作しません。

私は周りを探してみましたが、私を可能にする簡単なフェード技術を見つけることができません。画像のスタックを一連のコントロール (この場合は < li> 要素) に配置します。特定のコントロールにカーソルを合わせると、画像の 1 つがフェードインし、他の画像はすべて非表示になり、現在の画像はフェードアウトします。

IE では常にエラーが発生し、適切にフェードしないようです。誰かが私がどこで間違っているのか知っていますか?

4

2 に答える 2

0

暗闇の中でいくつかのショット、私は今ベッドに帰ります:)

  • プロトタイプから、フェード効果は、フェード<div>する要素の内部にクラスレスでシンプルなものを直接配置することを好むことを知っています。これを各画像に追加してみてください。
  • 画像にレイアウトを与えるとどうなるか (例: zoom: 1CSS プロパティを使用)
  • 画像に背景色を指定するとどうなりますか。
于 2009-12-15T02:23:46.997 に答える
0

以下は私にとってはうまくいきます（htmlの変更）：

<div id="homeImages">
    <div style="display: none; width:950px; height:500px; background:url('http://jonesonter.notomato.com.au/wp-content/themes/jonesonter/img/home-page/conditioned.jpg');" id="homeConditioned"></div>
    <div style="display: none; width:950px; height:500px; background:url('http://jonesonter.notomato.com.au/wp-content/themes/jonesonter/img/home-page/guided.jpg');" id="homeGuided"></div>
    <div style="display: block; width:950px; height:500px; background:url('http://jonesonter.notomato.com.au/wp-content/themes/jonesonter/img/home-page/informed.jpg');" id="homeInformed"></div>
    <div style="display: none; width:950px; height:500px; background:url('http://jonesonter.notomato.com.au/wp-content/themes/jonesonter/img/home-page/shaped.jpg');" id="homeShaped"></div>
    <div style="display: none; width:950px; height:500px; background:url('http://jonesonter.notomato.com.au/wp-content/themes/jonesonter/img/home-page/sustained.jpg');" id="homeSustained"></div>
</div>
于 2009-12-15T02:53:14.237 に答える