Hiding and revealing divs
<p>I've a script which works fine when written like this:</p>

<pre><code>var isPaused = false,
jQuery(function () {
    var $els = $('div[id^=film]'),
        i = 0,
        len = $els.length;

    $els.slice(1).hide();
    setInterval(function () {
        if (!isPaused) {
            if (len &gt; 1) {
                $els.eq(i).fadeOut(function () {
                    i = (i + 1) % len;
                    $els.eq(i).fadeIn();
                    });
            }
        }
    }, 3500);
});
</code></pre>

<p>But I wanted to add a next and prev button so I rewrote like this, which I thought would work.</p>

<pre><code>var isPaused = false,
    $els = $('div[id^=film]'),
    i = 0,
    len = $els.length;

    $els.slice(1).hide();
    setInterval(Slide(1), 3500);

function Slide (x) {
    if (!isPaused) {
        if (len &gt; 1) {
            $els.eq(i).fadeOut(function () {
                i = (i + x) % len;
                if (i&lt;0) {
                    i = len;
                }
                $els.eq(i).fadeIn();
                });
        }
    }
}

$('#next').click(Slide(1));
$('#prev').click(Slide(-1));
</code></pre>

<p>But this code is just displaying all the divs when the page is loaded and then doesn't fade them in and out or allow the next and prev buttons to work.  What am I doing wrong?</p>

<p><strong>UPDATE</strong>
Perhaps I should ask this differently.  Given the first block of code, how should I change it to enable Prev and Next buttons? </p>