内容显示/隐藏动画

时间:2014-04-15 06:59:34

标签: jquery html css

我创造了一个小提琴。我想知道我是否采取了正确的方式。

这是我的代码,

<div class="container">
<div>Sadness is emotional pain associated with, or characterized by feelings of disadvantage, loss, despair, helplessness and sorrow.</div>
<div>Sadness is a common experience in childhood. Acknowledging such emotions can make it easier for families to address more serious emotional problems,[3] although some families may have a (conscious or unconscious) rule that sadness is "not allowed".[4] Robin Skynner has suggested that this may cause problems when "screened-off emotion isn't available to us when we need it... the loss of sadness makes us a bit manic".</div>
<div>Sadness is part of the normal process of the child separating from an early symbiosis with the mother and becoming more independent. Every time a child separates just a tiny bit more, he or she will have to cope with a small loss.</div>

JS:

delay=2000;
function repeat(){
    visibleTextBlock=$('.container div:visible');
    visibleTextBlock.fadeOut();
    visibleTextBlock.next().fadeIn();
} ;
T=setTimeout(function(){
    repeat();
    setTimeout(function(){
        repeat();
    },delay);
},delay);

Fiddle

1 个答案:

答案 0 :(得分:2)

请试一试。

delay=2000;

I=setInterval(function(){
    visibleTextBlock=$('.container div:visible');
    visibleTextBlock.fadeOut();
    visibleTextBlock.next().length>0 ? visibleTextBlock.next().fadeIn() : $('.container div:first').fadeIn();
},delay);

小提琴:http://jsfiddle.net/ramanmandal2/y2k58/2/