Trouble Getting This Sliding Right

Question

So here is my little HTML page with a playlist of videos:

http://jsfiddle.net/VvR4H/3/

As you can see, in the grey area I have an inline list of playlists, I have three now:

• Kangaroo Fighting
• Australian Sports
• Real Football

Under each playlist are listed videos.

What I want to achieve is a nice horizontal scrolling between my playlists. Right now, when you click on the left or right corner of the grey playlist bar (where the text is half cut), it will slide to the other playlist.

However the sliding is not very nice. I want the Kangaroo Fighting to slide in the middle of the playlist bar when you click on the left corner, could you help me please?

Here is my HTML:

<div class="container">
    <ul class="playlists">
        <li class="playlist">
            <div class="title"> <span class="move-left">Real Foorball</span>
 <span>Kangaroo Fighting</span>
 <span class="move-right">Australian Sports</span>

            </div>
            <ul class="videos">
                <li class="video">Video 1 C</li>
                <li class="video">Video 2 C</li>
                <li class="video">Video 3 C</li>
            </ul>
        </li>
        <li class="playlist">
            <div class="title"> <span class="move-left">Kangaroo Fighting</span>
 <span>Australian Sports</span>
 <span class="move-right">Real Football</span>

            </div>
            <ul class="videos">
                <li class="video">Video 1 A</li>
                <li class="video">Video 2 A</li>
                <li class="video">Video 3 A</li>
            </ul>
        </li>
        <li class="playlist">
            <div class="title"> <span class="move-left">Australian Sports</span>
 <span>Real Football</span>
 <span class="move-right">Kangaroo Fighting</span>

            </div>
            <ul class="videos">
                <li class="video">Video 1 B</li>
                <li class="video">Video 2 B</li>
                <li class="video">Video 3 B</li>
            </ul>
        </li>
    </ul>
</div>

My CSS:

ul li {
    list-style: none;
}
.container {
    position: relative;
    background: #000;
    width: 300px;
    height: 500px;
    overflow: hidden;
    font-family: sans-serif;
}
ul.playlists {
    width: 1200px;
    padding-left: 0;
    margin-top: 0;
    position: absolute;
    left: -300px;
}
ul.playlists li {
    float: left;
    width: 300px;
    height: 50px;
}
ul.playlists li.playlist .title {
    width: 100%;
    background: grey;
    color: white;
    line-height: 50px;
    text-align: center;
}
ul.playlists li.playlist .title .move-left, ul.playlists li.playlist .title .move-right {
    width: 30px;
    line-height: 50px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
}
ul.playlists li.playlist .title .move-left {
    float: left;
    direction: rtl;
}
ul.playlists li.playlist .title .move-right {
    float: right;
}
ul.videos {
    clear: both;
    padding-left: 0;
}
ul.videos li {
    float: left;
    width: 250px;
    height: 50px;
    padding: 25px;
    color: white;
    background: blue;
    border-top: 1px solid black;
}

And my JavaScript:

$(".move-left").click(function () {
    $(this).parent().parent().parent().animate({
        "left": "0"
    }, 500, "linear", function () {
        console.log("yay");
    });
});

$(".move-right").click(function () {
    $(this).parent().parent().parent().animate({
        "left": "-600"
    }, 500, "linear", function () {
        console.log("yay");
    });
});

Answer 1

It is not complete (I didnt do infinity loop), but I guess it has better animation as you requested.

I separated your html into 2 parts. First one is moving slower then second one. So you can se half text of next titles but you dont have to duplicate texts.

http://jsfiddle.net/VvR4H/10/

html

<div class="container">
    <div class="title-wrapper">
            <div class="title"> 
                <span>Real Foorball</span>
                <span>Kengoroo Fighting</span>
                <span>Australian Sports</span>
            </div>
    </div>


    <div class="playlist">
            <ul class="videos">
                <li class="video">Video 1 C</li>
                <li class="video">Video 2 C</li>
                <li class="video">Video 3 C</li>
            </ul>
            <ul class="videos">
                <li class="video">Video 1 A</li>
                <li class="video">Video 2 A</li>
                <li class="video">Video 3 A</li>
            </ul>
            <ul class="videos">
                <li class="video">Video 1 B</li>
                <li class="video">Video 2 B</li>
                <li class="video">Video 3 B</li>
            </ul>
        </div>
</div>

css

    ul li {
    list-style: none;
}

.container {
    position: relative;
    background: #000;
    width: 300px;
    height: 500px;
    font-family: sans-serif;
    overflow: hidden;
}

div.title-wrapper {
    background: grey;
    height: 50px;
}

div.title {
    position: absolute;
    overflow: hidden;
    height: 50px;
    left: 75px;
    white-space: nowrap;
}

div.playlist {
    position: absolute;
    overflow: hidden;
    top: 50px;
    clear: both;
    white-space: nowrap;
}
div.title span {
    width: 300px;
    background: grey;
    color: white;
    line-height: 50px;
    text-align: left;
    display: block;
    float: left;
    margin: 0;
    padding: 0;
    text-indent: 20px;
}

ul.videos {
    float: left;    
    width: 300px;
    margin: 0;
    padding: 0;
}

ul.videos li {
    display: block;
    background: blue;
    height: 50px;
    padding: 10px 20px;
    margin: 1px 0 0 0;
    color: white;
}

javascript

$('.title span').css({
    'text-indent' : '0', 
    'text-align' : 'center', 
    'width' : '150px'
});

var titles = [];
$('.title span').each( function () {
    titles.push($(this));
});

var max = titles.length-1;
var left = max;
var right = 1;

$('.title span').click(function () {
    console.log($(this).context.innerText + '   left: ' +titles[left].context.innerText + '   right: ' +titles[right].context.innerText)
    if($(this).context==titles[left].context) {
        left = (left==0) ? max : --left;
        right = (right==0) ? max : --right;
        $('.title').animate({
            "left": "+=150px"
        }, 500);
        $('.playlist').animate({
            "left": "+=300px"
        }, 500);
    } 
    if($(this).context==titles[right].context) {
        left = (left==max) ? 0 : ++left;
        right = (right==max) ? 0 : ++right;
        $('.title').animate({
            "left": "-=150px"
        }, 500);
        $('.playlist').animate({
            "left": "-=300px"
        }, 500);
    }
});