首页 > 怎样用js实现一个元素的 hide->show->hide->show 这么循环的动画?

怎样用js实现一个元素的 hide->show->hide->show 这么循环的动画?

RT,本来我尝试过用css3来写动画,但是效果是渐变的而我希望是不拖泥带水的闪动;
js的话尝试了下面的写法,不过一点儿效果也没有,无论是放在(document).ready 中还是放在外面。。。

function rc(){
    setTimeout("$('.car-rc').hide()",1000);
    setTimeout("$('.car-rc').show()",1000);
    }
setInterval("rc()",1000);

所以提问向大家请教,谢谢。


var flag = true;
setInverval(function(){
    (flag = !flag) ? show() : hide();
},1000);

你要的就是一个闪烁的效果吧!?

$('.XX')
.fadeOut(100)
.fadeIn(100)
.fadeOut(100)
.fadeIn(100);


来个CSS版的:

http://jsfiddle.net/v8Uc8/2/


    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);

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图片


http://jsfiddle.net/htbNt/


你这里的代码首先是两个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,而且时长也是一样的,差不多同时隐藏同时显示了,在很微小的时间内肉眼看不清变化

【热门文章】
【热门文章】