Hover transitions with jQuery

Question

I'm wondering how I'm to add a transition to this code.

$("#navContainer").hover(function(){
    $("#navContainer").css("height","auto");
    },function(){
    $("#navContainer").css("height","74px");
});

I searched the web for a while but couldn't find a simple solution... I'm very new to jQuery. Here's exactly what I'm trying to do.

@undefined Sorry, but I still can't get it to work. Are you able to show me? — Jeremy Blazé, Jul 06 '13 at 04:31

score 0 · Answer 1 · answered Jul 06 '13 at 04:39

0

I've created a JSFiddle which does what you want. The good part about it is all you need is standard HTML and CSS3 transitions, which are super fast and there are plenty of CSS3 shims that will get transitions working in pretty much every browser. What I've done is made the <a> element a container for a div, which you can put all of the stuff inside, and upon hovering on any of the green background, you will see the height and color of the text transition smoothly and nicely.

answered Jul 06 '13 at 04:39

Ilan Biala

3,319
5
36
45

Thanks for making this, but I'm aware I could use CSS3 transitions, but the reason I'm using jQuery for the transitions is that I'm going from a fixed height of 74 pixels to an auto height, and CSS3 transitions don't work on this. – Jeremy Blazé Jul 06 '13 at 04:40

score 0 · Answer 2 · edited May 23 '17 at 11:46

0

I've made some adjustments to my answer, and sorry for my previous uncarefully one. You may use animate both when mouseenter and mouseleave events. But unfortunately, animate has some problems with {"height": "auto"} expression, so I found this one to solve it: JavaScript jQuery Animate to Auto Height

http://jsfiddle.net/tVxNc/1/

$("#navContainer").hover(function(){
    var $navContainer = $("#navContainer");
    var $defaultHeight = $navContainer.height();
    var $autoHeight = $navContainer.css('height', 'auto').height();
    $("#navContainer").css('height', $defaultHeight).animate({"height": $autoHeight}, 400, 'swing');
}, function(){
    $("#navContainer").animate({"height": "80px"}, 400, 'swing');
});

edited May 23 '17 at 11:46

Community

1
1

answered Jul 06 '13 at 04:40

Melkor

532
8
25

That looks close to what I want, but it doesn't seem to work. I've created a [fiddle](http://jsfiddle.net/tVxNc/) to show you the whole thing. – Jeremy Blazé Jul 06 '13 at 04:45
@JeremyBlazé Sorry, it should be `{"height":"74px"}` – Melkor Jul 07 '13 at 05:00

score 0 · Answer 3 · answered Jul 06 '13 at 04:47

$('#navContainer').hover(function(){
  $(this).animate({
    height: $(this)[0].scrollHeight+'px'
  }, 400);
}, function(){
  $(this).animate({
    height: 'auto'
  }, 400);
});

I found it in another discussion (recommended by @undefined) in the end. Thanks for the help though :)

Hover transitions with jQuery

3 Answers3