Увеличить div height onmouseover

Мне нужна высота на div 50px по умолчанию, и ее нужно заменить на 300px onmouseover. Я закодировал ниже, чтобы реализовать его.

<style type="text/css">
#div1{
height:50px;
overflow:hidden;
}
#div1:hover{
height:300px;
}
</style>
<body>
<div id="div1"></div>
</body>

Этот код работает нормально, но в соответствии с свойством CSS при наведении его немедленно изменяется его высота. Теперь мне нужен стильный способ, как медленно расширяться div onmouseover и сжиматься на выезде. Как расширить и списать div на зависание?

Ответ 1

Существует несколько подходов - вот CSS и JQuery, которые должны работать во всех браузерах, а не только в современных:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {

  $("#div1").hover(
    //on mouseover
    function() {
      $(this).animate({
        height: '+=250' //adds 250px
        }, 'slow' //sets animation speed to slow
      );
    },
    //on mouseout
    function() {
      $(this).animate({
        height: '-=250px' //substracts 250px
        }, 'slow'
      );
    }
  );

});
</script> 

<style type="text/css">
#div1{
    height:50px;
    overflow:hidden;
    background: red; /* just for demo */
}
</style>

<body>
<div id="div1">This is div 1</div>
</body>

Ответ 2

#div1{
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

Легко!

Ответ 3

В "современном" браузере вы можете просто применить css transition effect:

#div1 {
    -moz-transition: 4s all ease-in-out;
    -ms-transition: 4s all ease-in-out;
    -webkit-transition: 4s all ease-in-out;
    -o-transition: 4s all ease-in-out;
}

Это применит эффект перехода в течение 4 секунд с уменьшением ease-in-out для совместимого firefox, то есть хрома/сафари (webkit) и браузера Opera. Подробнее:

Переходы CSS

Вы можете сделать это на шаг впереди и проверить, поддерживает ли текущий браузер css-переходы, если они доступны, использовать их для анимации и если не использовать анимацию javascript script. Пример для этого:

анимация BarFoos

Ответ 4

Вы можете использовать jQuery .animate() Это будет действовать на любой элемент с классом "tab" и будет возвращаться при выводе мыши.

$('.tab').hover(function() {
     $(this).stop()
     $(this).animate({
        height: '+=250'
      }, 500)

         }, function() {
    $(this).stop()
     $(this).animate({
        height: '-=250'
      }, 500)            
})

Ответ 5

Вы можете использовать JQuery .mouseover http://api.jquery.com/mouseover/, .mouseout http://api.jquery.com/mouseout/ и .animate http://api.jquery.com/animate/, чтобы выполнить это.

В событии .mouseover вы должны оживить высоту 300px, а в событии .mouseout вы будете анимировать до 50px. Убедитесь, что вы вызываете .stop в div перед вызовом анимации, иначе у вас будут нечетные проблемы.