Question

So I have a div with a set width and height, and I want the content inside to slide automatically (without hover or interaction from the user) after like so many seconds to reveal different content. What my actual goal is, I have boxes with an audio player and the notes of the generated content, and I want it to slide up down or left right whatever, to reveal the artist blabhalbalh. You can see what I’m talking about at here.

Oh, silly me. A good example would be Windows Phone 7 live tiles, thats actually what I’m basing it off of.

Answer 1

    var swap = false;
    var w = 309;
    var h = 261;    
    var i = 0;
    var x = 0;
    var q = 1;
    var t;

    window.onload=function(){
        i = initPortfolio();
        setTimeout("portfolioRotate()",2000);
    }

    function initPortfolio(){
        $('.portfolio-item').each(function(index){i = i+1;});
        for(var n=1;n<=i;n=n+1){
            lpos = w * n - w;
            $('#item-'+n).css('left',lpos);
        }
        $('.offs').css('display','block');
        x =  i * w - w;
        return i;
    }
    function portfolioRotate(){
        swap = false;
        $('.portfolio-item').animate({left:'-='+w},6000,function(){
            nn = this.id.split("-")[1];
            if(q==nn && swap==false){
                $('#item-'+q).css('left',x);
                if(q<i){q=q+1}else{q=1};
                swap = true;
                u=setTimeout("portfolioRotate()",2000);
            }
        });
    }

        <div id="portfolio-container">
            <div class="portfolio-item" id="item-1"></div>
            <div class="portfolio-item" id="item-2"></div>
            <div class="portfolio-item" id="item-3"></div>
            <div class="portfolio-item offs" id="item-4"></div>
        </div>

    .offs{
        display:none;
    }
    #portfolio-container{
        width:927px;
        height:318px;
        margin-top:30px;
        position:relative;
        overflow:hidden;
    }
    .portfolio-item{
        width:309;
        padding-top:20px;
        position:absolute;
        height:100%;

    }

This might be terrible, but I just pulled it from something I was working on recently. Let me know if it isn’t sliding, or needs explanation. using jQuery. there is probably a way better way to position the components initially with css.