Question

I have a slider that when clicked, animates a div vertically, then goes back to the same position as when started.

http://www.eirestudio.net/hosting-files/markup/

My question is; how can I make this slider slide n times, let’s say 10 instead of just once?

JavaScript

$('#featured li.block div').click(function()
{
    $(this).animate
    ({
        top: "-=200"
    }, 300, function() 
    {
        $(this).css('top', '220px').animate
        ({
            top: "-=220"
        }, 300 );
    });
});

HTML

<div id="featured">
    <div class="wrapper">
        <ul>
            <li class="block">
                <div>aaa</div>
            </li>
            <li class="block">
                aaa
            </li>
            <li class="block">
                aaa
            </li>
            <li class="block">
                aaa
            </li>
            <li class="block">
                aaa
            </li>
        </ul>
    </div>
</div>

Answer 1

You can declare a function inside of your click event that calls back to itself to handle the looping of your animation.

$('#featured li.block div').click(function() {
    var f = function($this, count) {
        $this.animate({
            top: "-=200"
        }, 300, function() {
            $this.css('top', '220px').animate({
                top: "-=220"
            }, 300, function() {
                if (count > 0) {
                    count = count - 1;
                    f($this, count);
                }
            });
        });
    };
    f($(this), 10);
});

Example on jsfiddle with the css provided.