Как показать div на половину, при hover показать div полностью?

Question

[Alex Smith]

Есть div, он всплывает сверху вниз при загрузки страницы. Необходимо, чтобы при наведении мыши он раскрывался полностью. Приведу ниже свой div:

<div id="sale">
  Новинки золотого сезона на <a href="http://yandex.ru</a><br> Для мужчин женщин и детей<br>Выбирай сейчас<br>
  <a href="#" id="close-sale">Закрыть</a>
</div>

$(document).ready(function(){
  $("#sale").addClass("display");
   $("#close-sale").click(function(){ 
    event.preventDefault();
    $("#sale").addClass("close-sale");
  });
});

Comments

[Виталий Инчин ☢]

Ссылку на фидл можно?

Answer 1

[Pretor DH]

.display {                               /* пропиши свои размеры */
       height:100px;                    /* высота раскрытого */
       max-height:50px;              /* высота скрытого */
   }
   .display:hover {
       max-height:100px;           /* опять высота раскрытого */
   }

Comments

[Alex Smith]

.display {
display: block;
transition-duration: 1s;
-webkit-animation: sale 1s 1; /* Chrome, Safari 5+ */
-moz-animation: sale 1s 1; /* Firefox 5-15 */
-ms-animation: sale 1s 1; /* IE9 */
-o-animation: sale 1s 1; /* Opera 12.00 */
animation: sale 1s 1; /* Chrome, Firefox 16+, IE 10+, Opera
.display:hover {
height:100px; }

вот так получилось.

Answer 2

[Insower]

quirksmode.org/css/css2/overflow.html

Так же пример
jsfiddle.net/H9LzU

Answer 3

[owl-cat]

var speed=1000, originalHeight=100, hoverHeight=200;
$('.example').hover(function(){
        $(this).stop().animate({height:hoverHeight},speed);
    },function(){
        $(this).stop().animate({height:originalHeight},speed);
 });