Simple Jquery FadeIn/Fade out text

News line animate, fade in out text

by pradeep

HTML

<div id="slideshow">
    <div>Pretty cool eh? This slide is proof the content can be anything.</div>
    <div>Pretty cool? This slide is proof the content can be anything.</div>
    <div>Pretty cool eh? This slide is proof the content can be anything.</div>
</div>

CSS

#slideshow {
    margin: 50px auto;
    position: relative;
    width: 240px;
    height: 240px;
    padding: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}
#slideshow > div {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
}

JavaScript

$("#slideshow > div:gt(0)").hide();

setInterval(function () {
    $('#slideshow > div:first')
        .fadeOut(1000)
        .next()
        .fadeIn(1000)
        .end()
        .appendTo('#slideshow');
}, 3000);