CODEWITHSUNDEEP
javascriptjqueryhtmlcss
davidmarko
davidmarko

Reputation: 343

jQuery text slider animation

I found this cool script :

http://puaction.com/testimonials/

I want to make the same exact script with jQuery?

Here is my starting point

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

thanks !

Upvotes: 1

Views: 3889

Answers (1)

Matjaž
Matjaž

Reputation: 2115

Here is JSFiddle.

This code use 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;
}

Upvotes: 2

Related Questions