jQuery Loop Function doesn't appear to be working
<p>I'm having a problem with a <code>div</code> that fades into the page on slide 12 of an HTML/jQuery presentation.</p>

<p>When running the below code the <code>div</code> will fade in but will not follow the function called loop and repeat itself. It should fade to 50% opacity and back to 100% in a continuous loop.</p>

<p>I'm fairly confident the issue is with my syntax, but I've had no luck yet.</p>

<p>jQuery:</p>

<pre><code>// if slide 12
if (index == 11) {
    $("#prev").show();
    $("#next").show();
    $("#p12-1").delay(2000).fadeIn("slow", function() {
        function loop() {
            $("#p12-1").delay(200).fadeTo("slow", 0.5, function ()  {
                $("#p12-1").delay(200).fadeTo("slow", 1, loop);
            });
        };
    });
    createParticles($("#main").offset().left + 200, $("#main").offset().top + 100, 4000);
}
</code></pre>

<p>HTML:</p>

<pre><code>&lt;div class="main-slide main-slide-12" style="display:none;"&gt;
&lt;div id="p12-1" style="display:none;"&gt;&lt;img src="images/p12-1.png" /&gt;&lt;/div&gt;
&lt;div style="display:none;" id="p12-2"&gt;&lt;img src="images/p12-2.png" /&gt;&lt;/div&gt;
&lt;div style="display:none;" id="p12-3"&gt;&lt;img src="images/p12-3.png" /&gt;&lt;/div&gt;
</code></pre>
