javascript - 如何在固定时间间隔后上下移动标题？

Question

你能告诉我如何在规定的时间间隔后上下移动标题吗？这意味着我需要显示红色标题 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");
});