Is it possible to loop through 3 different functions that work on a click?
<p>I'm currently working on a little "slider". A slider that has 3 blocks on the side that are clickable. When you click one of the blocks the "slide" has to change to the corresponding slide. This wasn't a big problem for me.</p>

<p>But the second option I wanted is that there is a looping animation between the slides. But that is something I couldn't complete. And now my question is: is there an easy way to do this?</p>

<pre><code>$(document).ready(function() {
$("#button_1").css("background-color", "#0F0");

$("a#click_1").click(function() {
    $("#item_1").fadeIn(1000);
    $("#item_2").fadeOut(1000);
    $("#item_3").fadeOut(1000);
    $("#button_1").animate({
        backgroundColor: "#0F0"
    }, 1000);
    $("#button_2").animate({
        backgroundColor: "#000"
    }, 1000);
    $("#button_3").animate({
        backgroundColor: "#000"
    }, 1000);
});

$("a#click_2").click(function() {
    $("#item_1").fadeOut(1000);
    $("#item_2").fadeIn(1000);
    $("#item_3").fadeOut(1000);
    $("#button_1").animate({
        backgroundColor: "#000"
    }, 1000);
    $("#button_2").animate({
        backgroundColor: "#00F"
    }, 1000);
    $("#button_3").animate({
        backgroundColor: "#000"
    }, 1000);
});

$("a#click_3").click(function() {
    $("#item_1").fadeOut(1000);
    $("#item_2").fadeOut(1000);
    $("#item_3").fadeIn(1000);
    $("#button_1").animate({
        backgroundColor: "#000"
    }, 1000);
    $("#button_2").animate({
        backgroundColor: "#000"
    }, 1000);
    $("#button_3").animate({
        backgroundColor: "#FF0"
    }, 1000);
});
});
</code></pre>

<p>I already have got this fiddle: <a href="http://jsfiddle.net/Yauhnhan/VX9Qr/7/" rel="nofollow">http://jsfiddle.net/Yauhnhan/VX9Qr/7/</a></p>
