Store original height in Jquery mouseover
<p>I have a simple list and when I rollover the li selector I want to find the original height of the p tag inside that rollover scope that has a class of subtext. I want to store that value somewhere so I can use it on the rollout method. is there a way to store it in the this scope. If I use a global variable it may get changed by another rollover scope before the previous one gets to use it. </p>

<p>I also want to know how I can get the correct height of the selectors text height. 
var pheight = $(this, "p.subtext").height();
the above code is not reading the full height of the text. It seems to be reading the height of the li tag which in the css is set to height:50px;</p>

<pre><code>li{
width: 100px;
height: 50px;
float: left;
color: #191919;
text-align: center;
overflow: hidden;
list-style-type: none;
</code></pre>

<p>}</p>

<p><strong>HTML CODE</strong> </p>

<pre><code>&lt;body&gt;
&lt;ul&gt;
    &lt;li class="green"&gt;
        &lt;div &gt;&lt;/div&gt;
        &lt;p&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/p&gt;
        &lt;p class="subtext"&gt;The front page has more text than any other panel. I want the script to revel different height text.&lt;/p&gt;
    &lt;/li&gt;
    &lt;li class="yellow"&gt;
        &lt;p&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/p&gt;
        &lt;p class="subtext"&gt;More info&lt;/p&gt;
    &lt;/li&gt;
    &lt;li class="red"&gt;
        &lt;p&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/p&gt;
        &lt;p class="subtext"&gt;Get in touch&lt;/p&gt;
    &lt;/li&gt;
    &lt;li class="blue"&gt;
        &lt;p&gt;&lt;a href="#"&gt;Submit&lt;/a&gt;&lt;/p&gt;
        &lt;p class="subtext"&gt;Send us your stuff!&lt;/p&gt;
    &lt;/li&gt;
    &lt;li class="purple"&gt;
        &lt;p&gt;&lt;a href="#"&gt;Terms&lt;/a&gt;&lt;/p&gt;
        &lt;p class="subtext"&gt;Legal stuff&lt;/p&gt;
    &lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p></p>

<pre><code>$("document").ready(function(){

$("li").mouseover(function(){
    var pheight = $(this, "p.subtext").height();
    console.log(pheight);
    $(this).stop().animate({height:150}, {duration: 600, easing: "easeOutExpo"} );
})

$("li").mouseout(function(){
    $(this).stop().animate({height:50}, {duration: 600, easing: "easeOutExpo"} );
})
</code></pre>

<p>})</p>
