jQuery在循环中交叉淡化两个图像! [英] jQuery cross fading two images on a loop!
问题描述
我无法弄清楚如何在淡出循环中使用简单的淡入淡出功能。你可以告诉我,我对jQuery很新。我已经开始了,但是现在花了太长时间才算完,所以我想我会请求一些帮助。
I am having trouble working out how to get a simple fade in fade out loop to work. I am pretty new to jQuery as you can maybe tell. I have had a go at it but now it’s taking too long to work out so I thought I would ask for some help.
我想做什么:
我有两张图片,ID是#img1和#img2。我想图像1淡入然后等待让我们说6秒然后淡出。我已经尝试了.wait函数,但它只是停止了我工作的那一点。我设法让第一张图像淡入淡出,然后却没有等待。然后我想开始淡入图像2而图像1淡出然后图像2等待然后淡出而图像1再次淡入并永远循环!希望这是有道理的。
I have two Images, id's #img1 and #img2. I want image 1 to fadeIn then wait for lets say 6 seconds then fade out. I have tried the .wait function but it just stopped the little I had from working. I managed to get the first image to fade in and then out but with no wait in between. I then want to start fading image 2 in while image 1 is fading out then Image 2 to wait then fade out while image 1 fades in again and loop forever! Hope that makes sense.
$(document).ready(function(){
$('#img1').hide()
.load(function () {
$(this).fadeIn(4500)
.fadeOut(4500);
$('#img2').hide().wait(9000)
.load(function () {
$(this).fadeIn(4500)
.fadeOut(4500);
});
干杯,它让我发疯.Ps你可以尝试对发生的事情做一点解释在你回答。谢谢
Cheers, its driving me crazy. Ps can you try and give a little explanation to what is going on in you answer. Thanks
推荐答案
编辑2年以上:有更好的方法来做到这一点......所以忽略这个答案。
我会尝试回调和setTimeout的组合。(我要去建立在Kobi的回复上,因为他在我打字时发布了。)
I would try a combination of callbacks and setTimeout. (I'm going to build on Kobi's response, since he posted while I was typing.)
在CSS中,给两个图像一个display:none;而不是将它们设置为隐藏在从jQuery开始。然后在jQuery中:
In CSS, give both images a "display: none;" instead of setting them to hidden at the beginning in jQuery. Then in jQuery:
function imageOneFade(){
$('#img1').fadeIn(2000, function(){ setTimeout("$('#img1').fadeOut(2000); imageTwoFade();",6000); });
}
function imageTwoFade(){
$('#img2').fadeIn(2000, function(){ setTimeout("$('#img2').fadeOut(2000); imageOneFade();",6000); });
}
$(document).ready(function(){
imageOneFade();
});
希望有类似的东西你工作了。
Hopefully something like that you work.
setTimeout函数有两个参数。
The setTimeout function takes two parameters.
setTimeout(WHAT WILL HAPPEN, HOW LONG TO WAIT)
并且fadeIn / Out函数可以有第二个参数效果结束时会触发。
And the fadeIn/Out functions can have a second parameter that will trigger when the effect is finished.
这篇关于jQuery在循环中交叉淡化两个图像!的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!