jquery中实现了Deferred对象,你这个问题就好办多了。
因为只是针对一个元素,动画积累的问题,可以交给stop
来控制(若是包括了其它动画,这里就还需要全局动画变量来控制)。
而动画的先后过程控制,请用then
。
$(function(){
var fadeInAnimate=function(){
return $(this).fadeIn(1000).promise();
};
var fadeOutAnimate=function(){
return $(this).fadeOut(1000).promise();
};
$('.block').promise().then(fadeOutAnimate).then(fadeInAnimate).then(fadeOutAnimate).then(fadeInAnimate);
});
用gif图片
你这里的代码首先是两个setTimeout()
并列而且时间也一样。题主那种作法执行太快了,基本没效果。
我猜题主要的效果应该是hide之后1秒再show的意思,看了一下jquery的api>>
大概的作法 可以是hide完之后再settimeout,即回调里执行timeout。
$(document).ready(function(){
var btn = $('#btn');
//console.log("d");
function show(){
setTimeout(function(){btn.show();},1000)
}
function rc(){
setTimeout(function(){
btn.hide(10,show);
console.log("hided?");
},1000);
}
setInterval(function(){rc();},1000);
});
不过,闪烁估计不是我这种作法。我只是做个开头表示一下。:-)
setInterval(function(){
$('#xx').toggle();
},1000)
你没效果的原因是同时设置 setTimeout,而且时长也是一样的,差不多同时隐藏同时显示了,在很微小的时间内肉眼看不清变化
你要的就是一个闪烁的效果吧!?
$('.XX')
.fadeOut(100)
.fadeIn(100)
.fadeOut(100)
.fadeIn(100);
var e = document.getElementById("Your ID");
function hide() {
// Your Code
e.style.cssText = "display: none";
}
function show() {
// Your Code
e.style.cssText = "display: inline";
}
setInterval(hide, 1000);
setInterval(show, 2000);
来个CSS版的:
var flag = true;
setInverval(function(){
(flag = !flag) ? show() : hide();
},1000);