Question

我正在建立一个主页，其中包含四个不同图像的链接。单击一个时，我希望使用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时，我需要做两件事。一，选中的div变大（这已经有效）和两个，新图像出现。后者没有发生。

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。所有帮助表示赞赏!!

Answer 1

<强>问题

jQuery show()方法操纵元素的CSS display属性。由于您的图片隐藏了visibility属性，即visibility:hidden;，因此show()方法对它们没有明显影响（双关语意图:)。

<强>解决方案

删除visibility属性，并使用display属性隐藏您的图片：

img {
   ...
   display:none;
   ...
}

Answer 2

我做了一些改动，似乎工作正常：

CSS：

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

jQuery：在单击div时隐藏/显示有困难

2 个答案:

CSS：

SEEMS WORKING HERE