Question

我为我的img画廊制作了模态窗口。我想为模态内的下一个/ prev图像的不透明度变化设置动画。当我点击＆＃34; next＆＃34;按钮我希望下一个模态图像平滑淡入，将不透明度从0更改为1.同时我也希望当前的img也能顺利淡出。请给我建议我怎么能做到这一点？现在，当我点击下一个/上一个按钮时，我改变了图库中图像的不透明度，而不是模态内部。

Working example

HTML

<div id="content">


    <div class="modal-content">

    <div class="modal-close">Close</div>



        <div class="btnModal-left">Prev</div><!--end btnLeft-->
  <div class="btnModal-right">Next</div><!--end btnRight-->        

    <img src="http://o.aolcdn.com/hss/storage/adam/5d7b5eedccc289bd332af80a1ad5a226/montero-2017-us.jpg"><br>
    </div>



</div><!--.modal-content-->


  <ul class="gallery">

<li><img src="http://o.aolcdn.com/hss/storage/adam/a1289c4c6916baabb98e4673c7052f8/2014-hyundai-veloster-reflex-chicago.jpg"></li>

<li><img src="http://o.aolcdn.com/hss/storage/adam/a039929c8405451173090144693c1fa0/vw-grc-beetle-chicago.jpg"></li>

<li><img src="http://o.aolcdn.com/dims-shared/dims3/GLOB/crop/1280x850+0+0/resize/628x417!/format/jpg/quality/85/http://o.aolcdn.com/hss/storage/adam/1799bb1e072b82bda13c81563bdf5d0f/01-lingenfelter-reaper-chicago-1.jpg"></li>

 </ul>   

  </div><!--#content-->

CSS

ul.gallery {
position: relative;
display: block;
width: 100%;
}

.gallery li {
display: inline-block;
position: relative;
width: 100px;
height: 100px;
}

.gallery li img {
display:block; 
position:relative;
width:100px;
height:70px;
}

.modal-content {
    background-color: white;
    display: none;
    padding: 10px 10px 20px 10px;
    position: fixed;
    z-index: 1000;
    height:350px;
    width:500px;
}


.btnModal-left, .btnModal-right  {
display:inline-block;
border:1px solid black;
 }


.modal-content img {
    display: block;
    position:relative;
    max-height:350px;
    max-width:500px;
}


.modal-close {
position: absolute;
z-index: 9999;
right: 15px;
top: 15px;
width: 40px;
height: 20px;
display:block;
overflow:hidden;
border:1px solid black;
opacity:1;
}

Jquery的

jQuery(document).ready(function ($) {
var сlicked;    

 $(".gallery li").click(function() {

        $(".modal-content").fadeIn();

          $('.modal-content img').attr('src',$(this).find('img').attr('src'));

 сlicked = $(this);

}); 

    $(".modal-close").click(function() {

        $(".modal-content").fadeOut();


}); 

    $('.btnModal-right').click(function(){

    сlicked.find('img').fadeOut().end().next().find('img').fadeIn().trigger('click');



});

$('.btnModal-left').click(function(){
 сlicked.find('img').fadeOut().end().prev().find('img').fadeIn().trigger('click');


}); 



});

Answer 1

演示：http://jsfiddle.net/robschmuecker/pznnj/1/

jQuery(document).ready(function ($) {
    var сlicked, clone;

    $(".gallery li").click(function () {
        clicked = this;
        $(".modal-content").fadeIn();
        var clone = $(this).find('img').clone(true);
        clone.css({
            opacity: 0
        });
        $('.modal-content').append(clone);
        clone.animate({
            opacity: 1
        }, 1000);
    });

    $(".modal-close").click(function () {
        $(".modal-content").fadeOut();
    });

    $('.btnModal-right').click(function () {
        if ($(clicked).next('li').length) {
            nextImage = $(clicked).next('li').find('img');
            clicked = $(clicked).next('li');
            nextClone = nextImage.clone(true);
            nextClone.css({
                opacity: 0
            });
            $('.modal-content').append(nextClone);
            nextClone.animate({
                opacity: 1
            }, 1000, 'swing', function () {
                $(this).prev().remove();
            });
        }
    });

    $('.btnModal-left').click(function () {
        if ($(clicked).prev('li').length) {
            prevImage = $(clicked).prev('li').find('img');
            clicked = $(clicked).prev('li');
            prevClone = prevImage.clone(true);
            prevClone.css({
                opacity: 0
            });
            $('.modal-content').append(prevClone);
            prevClone.animate({
                opacity: 1
            }, 1000, 'swing', function () {
                $(this).prev().remove();
            });
        }
    });
});

Answer 2

您好需要在next（）之后添加fadeout，并且需要像下面的示例一样使用它

$(this).find('img').end().next().fadeOut();

Answer 3

Check Out this Fiddle

您希望淡出原始图像并点击OnComplete事件，然后再更改IMG源并逐渐淡入。

jQuery(document).ready(function ($) {
    var selectedItem;

    $(".gallery li").click(function () {
        selectedItem = $(this);
        $(".modal-content").fadeOut(500, function() {
            // Change the IMG source and fade in AFTER the fade out is complete.
            $('.modal-content img').attr('src', selectedItem.find('img').attr('src'));
            $(".modal-content").fadeIn();    
        });
    });

    $(".modal-close").click(function () {
        $(".modal-content").fadeOut();
    });

    $('.btnModal-right').click(function () {
        selectedItem.find('img').end().next().find('img').trigger('click');
    });

    $('.btnModal-left').click(function (){
        selectedItem.find('img').end().prev().find('img').trigger('click');
    });
});

jQuery下一个模态img opacity动画

3 个答案: