j查询文本滑块动画

jQuery text slider animation

本文关键字：动画 文本 查询      更新时间：2023-09-26

我发现了这个很酷的脚本：

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

谢谢！

这里是 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;
}
相关文章：