Jquery animate to 100%

[smilinmonki666]

Hi guys,

I am trying to make a div expand to the height of the text. I can set it to a set value but this is for a blog so I want to set it to the text height. The CSS looks like this:

Code:

.blogitem {
position: relative;
left: 40px;
width: 800px;
height: 140px;
margin: 10px;
border-left: 1px solid #C9C9C9;
border-right: 1px solid #C9C9C9;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

.blogitem h1 {
position: absolute;
top: 5px;
left: 90px;
padding: 0;
margin: 0;
font-size: 12pt;
color: #505050;
}

.blogitem .user a {
font-size: 10pt;
color: #699310;
text-decoration: none;
}

.blogitem .user a:hover {
font-size: 10pt;
color: #699310;
text-decoration: none;
}

.blogitem p {
position: absolute;
top: 15px;
right: 40px;
bottom: 5px;
width: 650px;
height: 0 auto;
border: 0px solid #000;
overflow: hidden;
font-size: 10pt;
padding: 10px;
background: #F5F5F5;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

& the jquery looks like this:

Code:

$(document).ready(function() {
$(‘.blogitem’).hover(function() {
$(this).stop().animate({‘height’: ‘100%’}, 500);
}, function() {
$(this).stop().animate({‘height’: ‘140px’}, 500);
});
});

The html looks like this:

Code:

{
echo “

“;
echo “

” . $row{‘#’} . ” by: ” . “” . $row{‘#’} . “” . “” . “

“;
echo “

” . $row{‘#’} . “

“;
echo “

” . date(“M”,strtotime($row[‘#’])) . “
” . “” . date(“d”,strtotime($row[‘#’])) . “” . “
” . date(“Y”,strtotime($row[‘#’])) . “

“;
echo “

“;
}

Can anyone help with this please… it’s driving me nuts…

[noahgelman]

If you want it to animate to 100% height, the the div surrounding it needs to be position relative I believe. So the parent of .blogitem needs to be position relative.

[Stackelberg]

Hi guys,
Wondering if this problem was resolved. I’m having the exact same problem with very similar code, and setting a parent div to position:relative does not seem to be solving the problem. I’m worried this may not be a syntax error but a misunderstanding of how jQuery works. When I inspect my code I can see the height value changing from 0 to 100% gradually, yet the actual animation is just a jump. Thanks :)

[Author]

Posts