How do I change an element with transition with jQuery when hovering on another element?

Question

So I have a list of 9 icons with titles representing 9 different areas of service. Divided into three rows of three using floats etc. Each has a description below it (a couple of paragraphs). I have used 'visibility: hidden' and 'height: 0px' to hide the descriptions. (not at the same time.) I want to hover or mouseover the icon and have the description appear below it.

I don't think I can use straight CSS (unless someone thinks otherwise) because I am triggering one element and changing another.

  <div id="category1" class="category_col1 cathead">
  <div><img src="images/..." name="category1" class="image-item-lead"/>
    <h3>Type of category</h3>
  </div>
  <div id="category1description" class="hide">
  <p>Some content...</p>
  <p>Some more content...</p>
  </div>
</div>

And we do that two more times per row.

The CSS that is applied to these elements is as follows.

.category_col1 {float:left;
clear:left;
width:32%;
padding:.5em .5em .5em 0em;
}
.image-item-lead {width: 90%;
margin-left:auto;
margin-right:auto;
display:block;
}
.cathead {visibility:visible;
}
.hide {height:0px;
overflow:hidden;
}

The jQuery that I have tried is as follows:

Surrounding all options

$(document).ready(function(){
});

This works:

$('#category1').mouseover(function(event){
  $(#category1description).css('height','auto');
  });

But obviously it shows up instantly, I would like it to show up gradually. I have tried:

$('#category1').mouseover(function(){
$('#category1descrioption').slideToggle('slow');
});

$('#category1').mouseover(function(){
$('#category1descrioption').animate({height: auto}, {duration:1500});
});

$('#category1').mouseover(function(event){
$('#category1descrioption').transition({height: auto}, ease, 1500);
 });

I am definitely missing something here. I hope someone can help.

`slideToggle('slow);` missing closing quotes after slow – Mritunjay Aug 20 '14 at 03:48 — Mritunjay, Aug 20 '14 at 03:48

score 0 · Answer 1 · edited May 23 '17 at 12:27

All CSS:

.category_col1:hover .hide {
  height: 100px;
}

.hide {
  height:0px;
  overflow:hidden;
  transition: height 1.5s;
}

caveat: The set height is due to auto not being supported. If auto is used, the effect is instantaneous instead of transitioned, this is part of the spec. Figure out what height you will need, and use that length value.

Option 2 is to use max-height for height:auto; :

How to animate height from 0 to auto using CSS Transitions article from bradshawenterprises.com

and

SO question CSS transition height: 0; to height: auto;

One way or another, you will have to make some decision on how to deal with height, as the max height method will have some animation timing issues that could lead to big delays on the hover-off if some are small heights, and some are large as the max-height value will determine the animation time. See the comments in the accepted answer.

Option 3: Figure out height of each div with JS/jQuery and set using an event listener for hover

How do I change an element with transition with jQuery when hovering on another element?

1 Answers1