Javascript JQuery自定义LightBox-不透明度渐变

我正在构建自己的jQuery灯箱，但遇到了一个小问题。html页面上有6个图像，单击其中一个图像时，整个页面上会显示一个覆盖图，图像位于中间

我遇到的问题是，控制灯箱显示的动画不是平滑的，它产生了一种向外的效果，我希望它作为一个整体来实现。不过，淡出的动画效果非常好，所以我不确定我错过了什么

下面是一个JSFIDLE：

我的HTML：

<div class="page-wrapper">

    <div class="grid">

        <div class="image-thumb-wrapper">
            <img src="img/Casinogames_2MillionBC.jpg" class="image-thumb" />
        </div>

        <div class="image-thumb-wrapper">
            <img src="img/casinogames_7thheaven.jpg" class="image-thumb" />
        </div>

        <div class="image-thumb-wrapper">
            <img src="img/casinogames_10sOrBetter.jpg" class="image-thumb" />
        </div>

        <div class="image-thumb-wrapper">
            <img src="img/casinogames_21BurnBlackjack.jpg" class="image-thumb" />
        </div>

        <div class="image-thumb-wrapper">
            <img src="img/Casinogames_AfterNightFalls.jpg" class="image-thumb" />
        </div>

        <div class="image-thumb-wrapper">
            <img src="img/casinoGames_AllAmerican.jpg" class="image-thumb" />
        </div>                      

    </div>

</div>
<div class="light-box">

    <div class="light-box-overlay">

    </div>
    <div class="light-box-wrapper">
        <img src="" id="light-box-image" />
    </div>
    <a href="" class="light-box-close">x</a>

</div>

我的CSS：

.page-wrapper {
        height: 100%;
        position: absolute;
        width: 100%;
        z-index: 1;
    }
    .grid {
        width: 600px;
        height: 552px;
        position: absolute;
        bottom: 0;
        left: 0;
        top: 0;
        right: 0;
        text-align: center;
        margin: auto;
        background-color: #DFDFDF;
        border: 2px solid #999;
        border-radius: 5px;
        padding: 20px 0px;
    }
    .image-thumb-wrapper {
        width: 228px;
        display: inline-block;
        margin: 5px;
    }
    .image-thumb:hover {
        cursor: pointer;
    }
    .light-box {
        position: fixed;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        z-index: 0;
    }
    .light-box-overlay {
        position: absolute;
        top: 0;
        left: 0;
        background-color: #000;
        height: 100%;
        width: 100%;
        opacity: 0.8;
    }
    img#light-box-image {
        z-index: 10;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        border: 2px solid #fff;
        background-color: #999;
        padding: 25px;
        border-radius: 5px;
    }
    .light-box {
        opacity: 0;
    }
    a.light-box-close {
        color: #fff;
        font-size: 1.2em;
        position: absolute;
        text-decoration: none;
        right: 10px;
        top: 5px;
    }
    a.light-box-close:hover {
        text-decoration: underline;
    }

你在找什么

你只需要做

$（'.lightbox'）.css（'z-index'，'2'）在其
淡入
之前

所发生的事情是，您正在将
z-index:2
放入淡入状态，而它
淡入状态，这就是它行为怪异的原因。
在淡入状态动画完成后，您正在更改
.light box的
z-index
，这就是为什么当它跳到其他内容之前时，您会看到它奇怪地显示出来的原因

更改此块：

$('.image-thumb').click( function() {
    var image = $(this).attr('src');
    $('#light-box-image').attr('src', image);
    $('.light-box').css('opacity', '0').fadeTo(100, 1, function() {
        $('.light-box').css('z-index', '2');
    });
});

为此：

$('.image-thumb').click( function() {
    var image = $(this).attr('src');
    $('#light-box-image').attr('src', image);
    $('.light-box').css({'z-index': '2','opacity':'0'}).fadeTo(100, 1);
});

演示
在前面的答案上展开，除了更改css中的z索引外，请尝试以下

$('.light-box').css('z-index', '2').animate({ opacity: 0 }, 500).fadeTo(100, 1);

这将给你一个更平滑的动画；时间可以从500毫秒调整到更高或更低。
为什么要使用动画和fadeTo？他们都做同样的事？
$('.light-box').css('z-index', '2').animate({ opacity: 0 }, 500).fadeTo(100, 1);