Question

当点击一个小图片并显示一个更大的图像时，我正试图获得暗淡的效果，

 <div id="main_content">
    <div id="press_page">    
       <div id="press_images">
            <img id="s1" class="small" src="images/press/small/press1.jpg" />
            <img id="s2" class="small" src="images/press/small/press2.jpg" />


            <img id="b1" class="big" src="images/press/big/press1.jpg" />

        </div>
      </div>
  </div>




 $(function() {

           $('#s1').click(function() {
                $('#main_wrapper').animate({opacity:0.1},1000);
                $('img.big').animate({opacity:1},1000).css('display','block');
            });

});

问题是大图片出现然后页面变暗，包括大图片，但我需要让页面变暗，然后大图片出现不透明度1，而其他一切都是黑暗的，

任何帮助将不胜感激。

感谢

Answer 1

将大图的动画放在调光器的动画功能的回调中，因此在调光发生后就会发生。

$('#main_wrapper').animate({opacity:0.1}, 1000, function () {
  $('img.big').animate({opacity:1},1000).css('display','block');
});

Answer 2

我认为更好的方法是创建叠加层。类似的东西：

#overlay {
    position: absolute;
    display: none;
    z-index:100;
    top: 0px;
    left: 0px;
    height:100%;
    width:100%;
    background: #000;
}

将它从不透明度0设置为0.8或其他东西，然后在其上方显示大图。

img.big {
    position: absolute;
    z-index: 101;
    top:50%;
    left:50%;
    margin-top: - (height of image / 2)
    margin-left: - (width of image / 2)
}

关于如何将其与一些jQuery交互联系起来，有很多good tutorials。

Answer 3

AFAIK，你不能让父DOM元素具有某种不透明度而不使其子元素也具有不透明度。

您的代码目前将父div的opactiy设置为10％，然后将图像不透明度设置为10％的100％ - 即。和其他图像一样。

我认为一个简单的解决方案是在课堂上进行选择。 div中的其他图像有一个名为“small”的类，所以为什么不简单地写：

$(document).ready(function(){

       $('#s1').click(function() {

                    $('.small').animate({opacity:0.1},1000);

            });

    });

Answer 4

Opacity是为数不多的CSS属性之一，它不会以您期望的方式传播。

最简单的解决方案是仅调整小图像，或移动到其父容器之外的大图像。

jquery暗淡效果的问题

4 个答案: