Question

默认情况下我需要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？

Answer 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>

Answer 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;
}

容易！

Answer 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;
}

对于兼容的firefox，即chrome / safari（webkit）和opera浏览器，这会在4秒内应用ease-in-out缓动的过渡效果。阅读更多：

CSS Transitions

您可以提前一步检查当前浏览器是否支持css转换（如果可用），将它们用于动画，如果不使用javascript动画脚本。例子：

BarFoos animations

Answer 4

你可以使用jQuery的.animate()这将对任何带有“tab”类的元素起作用，并且会在鼠标移出时恢复。

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

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

Answer 5

您可以使用jquery的.mouseover http://api.jquery.com/mouseover/，.mouseout http://api.jquery.com/mouseout/和.animate http://api.jquery.com/animate/来执行此操作。

在.mouseover事件中，您可以将高度设置为300px，并在.mouseout事件上设置动画为50px。确保在调用动画之前在div上调用.stop，否则您将遇到奇怪的问题。

扩展div高度onmouseover

5 个答案: