0

4 つの異なる画像である 4 つのリンクを含むホームページを作成しています。クリックすると、jQuerys 非表示/表示効果を使用して、対応するリンクの近くに新しい画像が表示されるようにします。今のところ、うまくいかなくて困っています。

HTML:

<img src="images/images/grey_shape1.png" class="grey_shape1"/>
<img src="images/images/grey_shape2.png" class="grey_shape2"/>
<img src="images/images/grey_shape3.png" class="grey_shape3"/>
<img src="images/images/grey_shape4.png" class="grey_shape4"/>

<div id="green_box_container">
<a href="#"><div id="green_box1"><img src="images/lilacs_small.jpg" /></div></a>
<a href="#"><div id="green_box2"><img src="images/lilacs_small.jpg" /></div></a>
<a href="#"><div id="green_box3"><img src="images/lilacs_small.jpg" /></div></a>
<a href="#"><div id="green_box4"><img src="images/lilacs_small.jpg" /></div></a>
</div>

*現在、4 つのリンクすべてに同じ画像を使用していますが、これは後で変更します。

div が選択されたら、2 つのことを行う必要があります。1 つ目は、選択した div が少し大きくなり (これは既に機能しています)、2 つ目は、新しい画像が表示されることです。後者は起きていません。

jQuery:

// this part is working fine
    $("#green_box_container a").click(function() {
          $(this).children().animate({height:105,width:105}, 'medium')
          $(this).siblings().children().animate({height:80,width:80}, 'medium')
    })

// this isn't
    $("#green_box1").click(function() {
        $(".grey_shape1").show("normal");

        })      
})

編集：ここにもフィドルがありますhttp://jsfiddle.net/vN4hu/

現在、#green_box1 を使用しています。すべての助けに感謝します!!

4

2 に答える 2

1

問題

jQueryshow()メソッドは、要素の CSSdisplayプロパティを操作します。visibility画像はプロパティで隠されているため、つまりvisibility:hidden;、show()メソッドはそれらに目に見える影響を与えません（しゃれが意図されています:)。

解決

プロパティを削除し、visibilityプロパティで画像を非表示にしdisplayます:

img {
   ...
   display:none;
   ...
}
于 2013-03-21T08:24:21.100 に答える
0

私はいくつかの変更を加えましたが、うまく機能しているようです：

CSS:

 .grey_shape1 {
    position: absolute;
    display:none; // <----this
    top: 50px; //<--------this
    left: 50px; //<-------this
    z-index: -3;
 }

ここで働いているようです

于 2013-03-21T08:30:44.230 に答える