JQuery淡入淡出循环和延迟
我有2个div堆叠在一起。JQuery淡入淡出循环和延迟
我需要一个非常简单的函数,将:
一)等待3秒钟,然后 B)淡出顶部事业部透露第二个div C)等待再次3秒钟,然后 d)淡入再次*Div e)再次环回
任何人都可以提供任何建议吗?
非常感谢
这是一个尝试。
function foo() {
jQuery("#mydiv").animate({opacity: 1.0}, {duration: 3000})
.animate({opacity: 0}, {duration: 3000})
.animate({opacity: 0}, {duration: 3000})
.animate({opacity: 1.0}, {duration: 3000, complete: foo})
}
注意:要暂停,只需调用具有相同目标值的属性的动画就像现在一样。最后一个动画调用与回调相同的函数。
PS:它会随着时间的推移导致堆栈溢出吗?
@Martin,将其标记为正确答案! – ScottE 2009-08-23 20:56:43
有没有办法阻止这个循环一旦启动?像,点击停止循环永远? – 2011-02-04 02:21:56
如果两个div有“ID1”和“ID2”的ID,以及ID2是上一个那么代码会是这样:
function fadeIn() {
$("id2").animate({opacity:0},500);
setTimeout(fadeOut,3500);
}
function fadeOut() {
$("id2").animate({opacity:1},500);
setTimeout(fadeIn,3500);
}
function startAnim() {
setTimeout(fadeIn,3000);
}
startAnim()开始动画周期,你应该打电话给@开始。然后淡入&保持动画id2和设置超时对方。延迟时间为3500,因为您需要3秒的延迟(即3000毫秒),而前一个动画需要500秒才能完成。这可以通过使用动画回调来完成,但这更加混乱。
此尝试使用jquery.com的一个小食谱函数等待。
函数doFading假定顶部div的id为“a4”。
function doFading() {
$("#a4").wait(3000)
.fadeOut("slow")
.wait(3000)
.fadeIn("slow",doFading);
}
$.fn.wait = function(time, type) {
time = time || 1000;
type = type || "fx";
return this.queue(type, function() {
var self = this;
setTimeout(function() {
$(self).dequeue();
}, time);
});
};
这是你在找什么(我认为)。它使用无序列表,但可以将它切换为div或将div放在列表项中,就像我在下面所做的那样。
这里是jQuery的...
$(document).ready(function() {
var j = 0;
var delay = 2000; //millisecond delay between cycles
function cycleThru(){
var jmax = $("ul#cyclelist li").length -1;
$("ul#cyclelist li:eq(" + j + ")")
.animate({"opacity" : "1"} ,400)
.animate({"opacity" : "1"}, delay)
.animate({"opacity" : "0"}, 400, function(){
(j == jmax) ? j=0 : j++;
cycleThru();
});
};
cycleThru();
});
...有的开始三网融合
ul#cyclelist {width:200px;border:solid;position:relative;overflow:hidden;height:200px}
ul#cyclelist li {font-size:1.4em;padding:20px;opacity:0;position:absolute}
你已经有你的HTML,但如果你需要一个例子...
<ul id="cyclelist">
<li><div>First Div</div></li>
<li><div>Second Div</div></li>
<li><div>Third Div</div></li>
</ul>
我喜欢邀功这一点,但它从CSS-技巧是直http://css-tricks.com/snippets/jquery/cycle-through-a-list/
如果你还想要它xfade。使用floyed的脚本,但进行我已经使用的更改。唯一的问题是你想要显示应该是在li元素
$(document).ready(function() {
var j = 0;
var delay = 5000; //millisecond delay between cycles
function cycleThru(){
var jmax = $("ul#cyclelist li").length -1;
$("ul#cyclelist li:eq(" + j + ")")
.animate({"opacity" : "1"} ,1000)
.animate({"opacity" : "1"}, delay);
$("ul#cyclelist li:eq(" + j + ")").next().animate({"opacity" : "1"} ,1000);
$("ul#cyclelist li:eq(" + j + ")")
.animate({"opacity" : "0"}, 1000, function(){
(j == jmax) ? j=0 : j--;
cycleThru();
});
};
cycleThru();
});
我知道这是旧的,第二个你的第一个形象,但我想我会分享我做了什么做到这一点
$(document).ready(function() {
var delay = 500;
$("#mydiv").bind('fadein', function()
{
$(this).fadeOut(1000, function()
{
$(this).delay(delay).trigger('fadeout');
});
});
$("#mydiv").bind('fadeout', function()
{
$(this).fadeIn(1000, function()
{
$(this).delay(delay).trigger('fadein');
});
});
$("#mydiv").fadeIn(1000, function()
{
$(this).trigger("fadein");
});
});
然后打电话时您希望它停止
$("#mydiv").stop().hide();
没有人可以永远看到这一点,但以防万一...
<script>
$(document).ready(function() {
$('#picOne').fadeIn(1000).delay(3000).fadeOut(1000);
$('#picTwo').delay(5000).fadeIn(1000).delay(3000).fadeOut(1000);
});
</script>
这是毫无虽然循环吧....
这将是
<script>
$(document).ready(function() {
function animate(){
$('#picOne').fadeIn(1000).delay(3000).fadeOut(1000);
$('#picTwo').delay(5000).fadeIn(1000).delay(3000).fadeOut(1000);
}
animate();
setInterval(animate, 10000);
});
</script>
非常好看又简单,每条产品线需要淡入淡出。我可以把这个交给设计师,并解释改变数字以改变褪色,很好。 – Duncanmoo 2013-03-18 12:18:44
的行为是有点不清楚:为(B),你要顶格淡出和第二个div淡入? (d)第二个div会再次淡出吗? – Jeff 2009-08-19 17:53:49