如何在定期间隔后上下移动标题？

Question

你可以告诉我如何在reqular间隔时间之后上下移动标题。这意味着我需要显示红色标题3秒然后绿色标题3秒。我认为它将使用向上滑动并向下滑动jquery的事件，并改变div的顶部位置。

http://jsfiddle.net/HL5h5/

.redrect{
position: relative;
    top:0px;
    width:100%;
    background-color:red;
    height:100px


}
.greenrect{
   position:relative;
    top:200px
    width:100%;
    background-color:green;
    height:100px


}

Answer 1

如果您希望两者都可见：

Fiddle

HTML：

<div class ="redrect"> </div>
<div class ="greenrect"> </div>

CSS：

.redrect{
    position  : relative;
    background: #c00;
    height    : 100px
}
.greenrect {
    position  : relative;
    background: #0a0;
    height    : 100px
}

JS：

function flip() {
    var x = parseInt($(".redrect").css('top')) ? 0 : 100,
        z = x ? [20, 10] : [10, 20];
    $(".redrect").animate({top: x, zIndex: z[0]}, 450);
    $(".greenrect").animate({top: -x, zIndex: z[1]}, 450);
}
setInterval(flip, 3000);

---

编辑：

自上而下幻灯片：

<强> Fiddle

HTML：

Lorem ipsum
<div id="wrap">
    <div class ="redrect">Eloha </div>
    <div class ="greenrect">Hi </div>
</div>

<button id="toggle">Stop</button>

CSS：

#wrap {
    height    : 100px;
    overflow  : hidden;
    position  : relative;
}
.redrect{
    position  : absolute;
    background: #c00;
    height    : 100px;
    width     : 100%;
}
.greenrect {
    position  : absolute;
    background: #0a0;
    height    : 100px;
    width     : 100%;
    top       : -100px;
}

JS：

function flipper(a, b, tw, ta) {
    this.a = a;   // Element 1
    this.b = b;   // Element 2
    this.t_anim = ta || 750;  // Animation time
    this.t_wait = tw || 3000; // Interval time
    this.tt = null;

    // Flip the two elements
    var flip = function($a, $b, time) {
        $a.css('zIndex', 10);
        $b.css('zIndex', 20).animate({
            top : 0
        }, time).
        promise().done(function() {
            $a.css('top', -100);
        });            
    };
    // Tick triggered by interval
    this.tick = function() {
        if (parseInt($(this.a).css('top'), 10))
            flip($(this.b), $(this.a), this.t_anim);
        else
            flip($(this.a), $(this.b), this.t_anim);
        return this;
    };
    // Toggle run/stop
    this.toggle = function() {
        if (this.tt !== null)
            this.stop();
        else
            this.start();
        return this.tt !== null;
    };
    // Stop
    this.stop = function() {
        clearInterval(this.tt);
        this.tt = null;
        return this;
    };
    // Start
    this.start = function() {
        this.stop();           // Make sure to stop it.
        this.tt = setInterval(
            $.proxy(this.tick, this),
            this.t_wait
        );
        return this;
    };
    return this;
}

var ff = new flipper(
                ".redrect", 
                ".greenrect", 
                1500, // Interval time
                750   // Animation time
            )
            .start();

$("#toggle").on("click", function(e){
    $(this).html(ff.toggle() ? "Stop" : "Start");
});

Answer 2

试试这个：
的 CSS：

.redrect {
    position: relative;
    top:0px;
    width:100%;
    background-color:red;
    height:100px
}
.greenrect {
    display:none;
    position:relative;
    top:200px width:100%;
    background-color:green;
    height:100px;
}

<强> JS：

 $(function () {
     setInterval(function () {
         $(".redrect").slideToggle();
         $(".greenrect").slideToggle();
     }, 3000);
 });

jsFiddle