Question

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

我遇到的问题是控制灯箱显示的动画不顺畅，它会产生一种有效的向外，我希望它们都能作为一个实现。虽然淡出它的动画效果很好，所以我不确定我缺少什么？

这是一个jsFiddle：http://jsfiddle.net/hqsapk5a/

我的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>

我的jQuery：

    $(document).ready( function() {

        $('.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');
            });
        });

    $('.light-box-close').click( function(e) {
        event.preventDefault(e);
        $('.light-box').css('opacity', '1').fadeTo(100, 0, function() {
            $('.light-box').css('z-index', '0');
        }); }); 
});

我的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;
    }

Answer 1

在淡出动画完成后，您正在更改z-index 的.light-box，这就是为什么当它跳到其他内容前面时会看到奇怪的显示效果。< / p>

更改此块：

$('.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); });

样本

Answer 2

this您要找的是什么？

您只需在$('.light-box').css('z-index', '2');之前fades in。

正在发生的事情是，z-index: 2正在fades in {{1}}，这就是为什么它行为奇怪。

Answer 3

扩展以前的答案，除了改变css中的z-index之外，试试这个......

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

这会给你一个更流畅的动画;时间可以从500毫秒调高或调低。

JQuery Custom LightBox - Opacity Fade

3 个答案: