Javascript 在MouseOver上展开div height_Javascript_Jquery_Html_Css

Javascript 在MouseOver上展开div height

javascript jquery html css

Javascript 在MouseOver上展开div height,javascript,jquery,html,css,Javascript,Jquery,Html,Css,默认情况下，我需要div 50px的高度，在mouseover上它必须更改为300px。我以下面的方式编码来实现它 <style type="text/css"> #div1{ height:50px; overflow:hidden; } #div1:hover{ height:300px; } </style> <body> <div id="div1"></div> </body> #第一组{ 高度：50px；溢

默认情况下，我需要div 50px的高度，在mouseover上它必须更改为300px。我以下面的方式编码来实现它

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


#第一组{
高度：50px；
溢出：隐藏；
}
#第1部分：悬停{
高度：300px；
}

此代码工作正常，但根据悬停的CSS属性，它会立即更改其高度。现在，我需要一种时尚的方式，比如在mouseover上缓慢扩展div，在moveout上收缩div。如何在悬停时展开和收缩div？

在“现代”浏览器中，您只需应用

css转换效果即可：
#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、ie、chrome/safari（webkit）和opera浏览器，这将在4秒钟内应用一种过渡效果，并使其易于输入输出。阅读更多：

您可以提前一步检查当前浏览器是否支持css转换，如果可用，将其用于动画，如果不支持，则使用javascript动画脚本。例如：
您可以使用jQuery的.animate（）
这将作用于具有“tab”类的任何元素，并在鼠标悬停时恢复
$('.tab').hover(function() {
     $(this).stop()
     $(this).animate({
        height: '+=250'
      }, 500)

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

轻松点
 您可以使用jquery的.mouseover
、.mouseout
和.animate
来执行该操作
在.mouseover
事件中，将高度设置为300px，在.mouseout
事件中，将高度设置为50px。在调用animate之前，请确保调用。在div上停止
，否则您会遇到一些奇怪的问题。
有几种方法——以下是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>


$（文档）.ready（函数（）{
$（“#div1”）。悬停(
//鼠标悬停
函数（）{
$（此）。设置动画({
高度：'+=250'//增加250px
}，'slow'//将动画速度设置为slow
);
},
//论慕斯奥特
函数（）{
$（此）。设置动画({
高度：'-=250px'//减250px
}“慢”
);
}
);
});
#第一组{
高度：50px；
溢出：隐藏；
背景：红色；/*仅用于演示*/
}
我是第一组
您可以使用jquery。使用动画功能。请看这里，或者您可以使用css转换（如果可用）。哇！令人惊叹的！但是我怎样才能降低滑动速度呢？例如，将.3s增加到1s谢谢！我在问你之前就试过了，但是从3改为10时，我没有发现有很大的区别，这就是我问你的原因！无论如何，非常感谢。你应该注意，css转换对新浏览器是有限制的。你应该检查你所在地区的浏览器支持情况。如果一年内没有人使用IE8，我也不会感到惊讶。如果几乎所有南美国家都使用Chrome浏览器，而俄罗斯使用Firefox浏览器，那么中国、中东、美国、加拿大和世界其他国家什么时候才能赶上？只有我们网页设计师继续支持IE，人们才会依赖它。谢谢！此代码工作正常，但在PageLoad上执行。如何在MouseOver上执行此代码？我很抱歉问这种愚蠢的问题，但我不知道如何在jQuery中编码！很抱歉！这不管用。我尝试使用jQuery（函数（$）{$（'.tab'）.hover（函数（）{$（this）.stop（）$（this）.animate（{height:'+=200'}，500}）；}，$（this.stop（）$（this）.animate（{height:'-=200'}，500}）；}）<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>