javascript - jQuery 文本 slider 动画

Question

我发现了这个很棒的脚本:

http://puaction.com/testimonials/

我想用 jQuery 制作完全相同的脚本吗？

这里是我的出发点

http://jsfiddle.net/5p79oevx/

html:

<div id="testimonials">

    <div class="testimonial">
        &quot;Text text text text text text text text text text text text text text text text text text text text text text text text text text text text &quot; - <span>Person</span>
    </div>

    <div class="testimonial">
        &quot;Text text text text text text text text text text text text text text text text text text text text text text text text text text text text &quot; - <span>Person</span>
    </div>

    <div class="testimonial">
        &quot;Text text text text text text text text text text text text text text text text text text text text text text text text text text text text &quot; - <span>Person</span>
    </div>

    <div class="testimonial">
        &quot;Text text text text text text text text text text text text text text text text text text text text text text text text text text text text &quot; - <span>Person</span>
    </div>

</div>

CSS:

#testimonials
{
    width:200px;
    height:200px;
}
.testimonial span
{
    color:red;
}

谢谢!

Answer 1

这是 JSFiddle .

此代码使用Jquery UI:

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

JS:

function roll(){
    var curr = 2;
    var count = 4;
    $('#testimonials .testimonial:nth-child(1)').show("slide", { direction: "down" }, 500);
    setInterval(function(){
        //console.log('C:'+curr);
        $('#testimonials .testimonial').hide("slide", { direction: "up" }, 500);
        $('#testimonials .testimonial:nth-child('+curr+')').delay(750).show("slide", { direction: "down" }, 500);
        curr++;
        if(curr == count+1){
            // 5000 - 500 - 750 - 500 = 3250    =>    delay = 3000
            $('#testimonials .testimonial:nth-child(4)').delay(3000).hide("slide", { direction: "up" }, 500);
            curr = 1;
        }
    }, 5000);
}

CSS:

#testimonials
{
    width:200px;
    height:200px;
    max-height: 200px;
}
.testimonial
{
    display: none;
}
.testimonial span
{
    color:red;
}