使用jQuery Image Gallery淡入淡出 [英] Fade in and out with jQuery Image Gallery
本文介绍了使用jQuery Image Gallery淡入淡出的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我已经制作了这个简单的jQuery图片库 http://jsfiddle.net/RVermeulen/XNsHC/3/
I've made this simple jQuery image gallery http://jsfiddle.net/RVermeulen/XNsHC/3/
但是我不能在其中做一个漂亮的fadeOut和In,因为如果我这样做(在其中包含fadeOut和In):
But I can't make a nice fadeOut and In in it, because if I do this (with fadeOut and In in it):
$(document).ready(function() {
$(".small_image").click(function() {
event.preventDefault();
var image = $(this).attr("rel");
$('#current_image').fadeOut(300);
$('#current_image').html('<img width="370" src="' + image + '"/>');
$('#current_image').fadeIn(300);
});
});
.html函数的加载速度似乎比FadeIn快,因此没有平滑"的淡入淡出.有人知道如何解决这个问题吗?
It looks like the .html function loads faster than the FadeIn, so it's no "smooth" fade. Does anyone know how to fix this with a delay or something?
推荐答案
You need to use the complete callback to change the image after the image is faded out:
$(".small_image").click(function () {
event.preventDefault();
var image = $(this).attr("rel");
$('#current_image').fadeOut(300, function() {
$('#current_image').html('<img width="370" src="' + image + '"/>');
$('#current_image').fadeIn(300);
});
});
这篇关于使用jQuery Image Gallery淡入淡出的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文