依次淡出然后淡入
fadeOut then fadeIn sequentially
我正在尝试淡出一张图片,然后在同一位置淡入另一张图片。
到目前为止我已经得到了这个 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');
});
但是我的问题仍然存在。我应该怎么做才能解决这个问题?
我不会破坏并重新创建元素;我只是更新属性。我还会添加一个 .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>
Is expected result that #slider not fade to appearance of empty
background during image transitions ?
Fades to either white, ready for the new image to fade in, or a crossfade - either would be acceptable
尝试将 #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/
我正在尝试淡出一张图片,然后在同一位置淡入另一张图片。
到目前为止我已经得到了这个 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');
});
但是我的问题仍然存在。我应该怎么做才能解决这个问题?
我不会破坏并重新创建元素;我只是更新属性。我还会添加一个 .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>
Is expected result that #slider not fade to appearance of empty background during image transitions ?
Fades to either white, ready for the new image to fade in, or a crossfade - either would be acceptable
尝试将 #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/