[Solved] Text slide show in jquery [closed]

by


There’s probably already a jQuery plugin that does exactly what you want, but here’s something simple I came up with off the top of my head as a concept that you can implement with just a few lines.

Put the things you want to slide as div elements inside a container div. Set the height of the container to the height of the child divs, with overflow hidden, such that only the first child div is showing; slide up the first child to hide it and automatically bring the next child into view; move the first child to the bottom of the container and make it visible again (though it won’t actually be visible yet because it is hidden below the bottom of the container); repeat forever.

It doesn’t matter how many child divs you put because the code only ever does anything with the current first one (so I’ve shown just contact and email here but in my working demo I’ve added some extras).

<div id="slideContainer">
    <div>Contact No: 555-666-7777</div>
    <div>Email: [email protected]</div>
</div>

<script>
$(function() {
    $("#slideContainer").css({
        "height" : $("#slideContainer div:first").css("height"),
        "overflow" : "hidden"
    });

    function slide() {
        $("#slideContainer div:first").slideUp(800, function() {
            var $this = $(this);
            $this.parent().append(this);
            $this.show();
            slide();
        });
    }
    slide();  
});
</script>

Demo: http://jsfiddle.net/VFB3C/

Again this is just what occurred to me as I read your question, but you can no doubt do something similar using jQuery’s animation methods and/or JavaScript’s setTimeout() or setInterval() methods.

solved Text slide show in jquery [closed]