jQuery console error: $(this).effect is not a function
<p>I've been staring at my code for hours now trying to work out why this seemingly simple play around with jQuery isn't working:</p>

<pre><code>&lt;!DOCTYPE HTML&gt;

&lt;html&gt;

    &lt;head&gt;

        &lt;title&gt;title&lt;/title&gt;

        &lt;meta charset="UTF-8"&gt;
        &lt;meta name="keywords" content="test"&gt;
        &lt;meta name="description" content="test"&gt;

        &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;

    &lt;/head&gt;

    &lt;body&gt;
        &lt;p class='box' id='title'&gt;&amp;quot;test&amp;quot;&lt;/p&gt;
        &lt;div class='gallery'&gt;
            &lt;p class='tNail' id='one'&gt;
            &lt;p class='tNail' id='two'&gt;
            &lt;p class='tNail' id='three'&gt;
            &lt;div class='clear'&gt;&lt;/div&gt;
            &lt;p class='tNail' id='four'&gt;
            &lt;p class='tNail' id='five'&gt;
            &lt;p class='tNail' id='six'&gt;
            &lt;div class='clear'&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class='clear'&gt;&lt;/div&gt;
        &lt;p class='footer'&gt;test 2011 &lt;a href='#'&gt;test&lt;/a&gt;&lt;/p&gt;
    &lt;/body&gt;

    &lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt;
    &lt;script&gt;
        $(document).ready(function()
        {
            $(".tNail").click(function()
            {
                $(this).effect("scale", {percent:200, direction:'both'}, 1000);
            });
        });
    &lt;/script&gt;

&lt;/html&gt;
</code></pre>

<p>I've tried using noConflict() to no avail. If anyone can shed some light I'd be grateful.</p>

<p>Thanks.</p>
