jQuery won’t animate or expand

[chrisburton]

I’m having a hard time trying to get this to animate and expand. Any help?

http://codepen.io/chrisburton/pen/lsdtc

[Anonymous]

Like this? http://codepen.io/Jarolin/pen/inmqK

[pixelgrid]

the effect you are trying to achieve is if the user hovers a font the whole div disappears and only the selected font is vissible?

[chrisburton]

@Jarolin No.

Basically the `.gallery` has a fixed height due to the designed layout. I’m trying to expand the height by adding `overflow: visible;` and `height: auto;` to show the additional typefaces.

If it’s also possible with a jQuery like slideDown in CSS, I’d opt for that.

[CrocoDillon]

You can’t animate to auto height I think, you can use the height of the inner element:

$(‘.font-samples’).mouseenter(function() {
$(‘.gallery’).animate({
height: $(‘.list-item’).height() + ‘px’
});
});

[chrisburton]

@CrocoDillon Perfect! What about on `mouseleave`? I need it to go back to the default state.

[CrocoDillon]

With jQuery’s hover you can set both handlers:

$(…).hover(function() {
// enter
}, function() {
// leave
});

just put the original height back :)

[chrisburton]

@Crocodillon Thank you, sir!

[Author]

Posts