Question

我试图淡出一张图像，然后在同一个地方淡入另一张图像。

到目前为止，我已经有了这个fiddle，但您可以看到它在.fadeOut()功能完成之前更改图像，当通过点击拇指更改图像时。我已经读过jQuery不按标准顺序运行（我的代码假设它是这样），所以我尝试添加完成的函数，如下所示：

$('#image').fadeOut('fast', function() {
    $('#image').html('<a href="' + image + '" data-lightbox="image-1" data-title="' + title + '"><img src="' + image + '" class="image"/></a>');
    $('#image').fadeIn('fast');
});

但是我的问题仍然存在。我该怎么做才能解决这个问题？

Answer 1

我不会破坏和重建元素;我只是更新属性。我还会包含一个.stop(true, true)来取消之前的动画，并在开始淡出之前直接跳到最后，以防有人快速点击。

var images = [
  'http://i.stack.imgur.com/uClcV.jpg?s=328&g=1',
  'https://www.gravatar.com/avatar/d050da3cf82fdf6cfa431358fee9a397?s=128&d=identicon&r=PG&f=1',
  'https://www.gravatar.com/avatar/ca3e484c121268e4c8302616b2395eb9?s=128&d=identicon&r=PG'
];
var current = 0;
updateImage(images[current], images[current]);

function updateImage(image, title) {
  var img = $('#image');
  img.stop(true, true).fadeOut('fast', function() {
    img.find('a').attr('href', image).attr('title', title);
    img.find('img').attr('src', image);
    img.fadeIn('fast');
  });
}

$("#next").click(function() {
  current = (current + 1) % images.length;
  updateImage(images[current], images[current]);
});

<input type="button" id="next" value="Next">
<div id="image">
  <a>
    <img style="height: 128px; width: 128px"><!-- Never do that, but for a demo, it's okay -->
  </a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Answer 2

预期结果#slider不会淡化为空的外观图像过渡期间的背景？

淡化为白色，准备好让新图像淡入或淡入淡出 - 要么可以接受

尝试将#slider width，height设置为预期的img宽度，高度;将background-color设置为#000

CSS

#slider {
    width:500px;
    height:505px;
    background-color:#000;    
}

JS

//clicking thumbnails
$(".image").click(function () {
    var image = $(this).attr("rel"); //getting the rel tag from the a tag
    var title = $(this).attr("data-title"); //data title from a tag
    $('#image').fadeOut('fast', function() { //fades out last image
    $('#image').html('<a href="' + image + '" data-lightbox="image-1" data-title="' + title + '">'
    + '<img src="' + image + '" class="image"/></a>')
    .fadeIn('fast'); 
    })

jsfiddle http://jsfiddle.net/bmu43fm7/13/

fadeOut然后按顺序淡入

2 个答案: