我在一个简单的图库中使用jQuery。 图像fadeOut,src改变,并且它们淡入。
通常,之前的图像会消失; 只有当元素达到完全不透明度时才会显示新图像。
什么可能导致延迟和后续跳转到新图像?
HTML
<div id="slide"> <img src="/img/products/image1.jpg"> </div>JS
var index = 0; $(function() { if (srcs.length > 1) { setInterval("slide(800, 800)", 6000); } }); function slide(o,i) { index++; if (index == srcs.length) index = 0; $("#slide img").fadeOut(o, function() { $(this).attr("src", path + srcs[index] + ext); $(this).fadeIn(i); }); }编辑:我把fadeIn()放在fadeOut()的回调中,但现在每次都会出现明显的问题。 图像一直淡出,然后一直淡入, 然后变化。
解决方案:在这个答案中 , .each()函数在新图像的fadeIn()期间引起了轻微的闪烁,但是删除.each()部分完全修复了这个问题。
I use jQuery in a simple image gallery. Images fadeOut, the src changes, and they fadeIn.
Frequently, the previous image is faded in; only once the element reaches full opacity is the new image displayed.
What could be causing the delay and subsequent jump to the new image?
HTML
<div id="slide"> <img src="/img/products/image1.jpg"> </div>JS
var index = 0; $(function() { if (srcs.length > 1) { setInterval("slide(800, 800)", 6000); } }); function slide(o,i) { index++; if (index == srcs.length) index = 0; $("#slide img").fadeOut(o, function() { $(this).attr("src", path + srcs[index] + ext); $(this).fadeIn(i); }); }Edit: I put fadeIn() in fadeOut()'s callback, but now the problem occurs noticeably every time. The image fades out all the way, then fades all the way back in, then changes.
Solution: in this answer, the .each() function caused a slight flicker during the new image's fadeIn(), but removing the .each() portion entirely fixed this.
最满意答案
我建议添加fadeIn函数作为fadeOut的回调函数。 这样就可以确保在加载新图像之前完成-out动画。
请参阅文档: http : //api.jquery.com/fadeOut/
$('#slide img').fadeOut(o, function() { // Animation complete. // Do fadeIn function here });I would recommend adding the fadeIn function as a callback function of fadeOut. That way you ensure the -out animation completes before the new image is loaded.
See documentation: http://api.jquery.com/fadeOut/
$('#slide img').fadeOut(o, function() { // Animation complete. // Do fadeIn function here });更多推荐
发布评论