Store original height in Jquery mouseover
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.
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;
li{
width: 100px;
height: 50px;
float: left;
color: #191919;
text-align: center;
overflow: hidden;
list-style-type: none;
}
HTML CODE
<body>
<ul>
<li class="green">
<div ></div>
<p><a href="#">Home</a></p>
<p class="subtext">The front page has more text than any other panel. I want the script to revel different height text.</p>
</li>
<li class="yellow">
<p><a href="#">About</a></p>
<p class="subtext">More info</p>
</li>
<li class="red">
<p><a href="#">Contact</a></p>
<p class="subtext">Get in touch</p>
</li>
<li class="blue">
<p><a href="#">Submit</a></p>
<p class="subtext">Send us your stuff!</p>
</li>
<li class="purple">
<p><a href="#">Terms</a></p>
<p class="subtext">Legal stuff</p>
</li>
</ul>
$("document").ready(function(){
$("li").mouseover(function(){
var pheight = $(this, "p.subtext").height();
console.log(pheight);
$(this).stop().animate({height:150}, {duration: 600, easin开发者_如何学Gog: "easeOutExpo"} );
})
$("li").mouseout(function(){
$(this).stop().animate({height:50}, {duration: 600, easing: "easeOutExpo"} );
})
})
First, you need to use the selector the other way round -- $('p.subtext', this). More obviously, use find:
var pheight = $(this).find('p.subtext').height();
Then you can store the data on the element itself with data:
$(this).data('pheight', pheight);
You can retrieve it in the mouseout function with data again:
$(this).stop().animate({height: $(this).data('pheight')}, {duration: 600, easing: "easeOutExpo"} );
jQuery's data() function allows you to store arbitrary data associated with the specified element. Returns the value that was set.
加载中,请稍侯......
精彩评论