Javascript 在鼠标悬停时扩展 div 高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8944815/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
expand div height onmouseover
提问by Mad coder.
I need height on the div 50px in default and it has to be changed to 300px onmouseover. I coded in below manner to implement it.
默认情况下，我需要 div 上的高度为 50 像素，并且必须在鼠标悬停时将其更改为 300 像素。我以下面的方式编码来实现它。
<style type="text/css">
#div1{
height:50px;
overflow:hidden;
}
#div1:hover{
height:300px;
}
</style>
<body>
<div id="div1"></div>
</body>
This code is working fine but as per CSS property on hover its immediately changing its height. Now, I need a stylish way like slowly expanding div onmouseover and contracting onmoveout. How to expand and contract div on hover?
这段代码工作正常，但根据 CSS 属性悬停时，它会立即改变其高度。现在，我需要一种时尚的方式，例如在mouseover 上缓慢扩展div 并在moveout 上收缩。如何在悬停时扩展和收缩div？
采纳答案by Dustin
There are a few approaches -- here is CSS and Jquery, which should work in all browsers, not just modern ones:
有几种方法——这里是 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>
回答by HandiworkNYC.com
#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;
}
Easy!
简单！
回答by jAndy
In a "modern" browser, you can just apply a css transition effect:
在“现代”浏览器中，您只需应用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;
}
This would apply a transition effect over 4 seconds with a ease-in-outeasing for compatible firefox, ie, chrome/safari (webkit) and opera browser. Read more:
这将应用超过 4 秒的过渡效果，并ease-in-out为兼容的 firefox，即 chrome/safari (webkit) 和 opera 浏览器提供缓动。阅读更多：
You can take this one step ahead and check if the current browser supports css transitions, if available, use them for animation and if not use a javascript animation script. Example for that:
您可以提前这一步，检查当前浏览器是否支持 css 转换，如果可用，将它们用于动画，如果不使用 javascript 动画脚本。例如：
回答by Diodeus - James MacFarlane
You can use jQuery's .animate()This will act on any element with with a class of "tab", and will revert on mouse-out.
您可以使用 jQuery 的.animate()This 将作用于具有“tab”类的任何元素，并在鼠标移开时恢复。
$('.tab').hover(function() {
$(this).stop()
$(this).animate({
height: '+=250'
}, 500)
}, function() {
$(this).stop()
$(this).animate({
height: '-=250'
}, 500)
})
回答by Matthew
You can use jquery's .mouseoverhttp://api.jquery.com/mouseover/, .mouseouthttp://api.jquery.com/mouseout/, and .animatehttp://api.jquery.com/animate/to perform that.
您可以使用 jquery 的.mouseoverhttp://api.jquery.com/mouseover/、.mouseouthttp://api.jquery.com/mouseout/和.animatehttp://api.jquery.com/animate/来执行该操作。
On the .mouseoverevent, you would animate the height to be 300px, and on the .mouseoutevent you would animate to 50px. Make sure you call .stopon the div before you call animate, otherwise you will have odd issues.
在.mouseover事件中，您将高度.mouseout设置为 300 像素，在事件中将高度设置为 50 像素。确保.stop在调用 animate 之前调用 div，否则会遇到奇怪的问题。
