悬停时临时调整元素的高度
我有一个高度有限的
我想做的是将其向下滑动到鼠标悬停在其上方时所需的高度，然后返回到原始高度（100px）。
我希望你明白我的意思
我不认为它使用 Slidedown() 函数来实现这一点，而且我在动画函数方面非常薄弱。有什么帮助吗？
I have a <h3> tag with limited height (100 px for example, position: absolute) and the text overflows it.
What I would like to do is slide it down over to the height that is needed when the mouse is over it and back to original height (100px).
I hope you understood what I mean
I don't think it uses slidedown() function for that and I am very weak in animate function. Any help please?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您可以在包含内容的 h3 中嵌套一个 div，然后使用 h3 作为屏蔽容器（使用 Overflow:hidden）。当用户将鼠标悬停在上面时，触发一个函数来获取内部 div 的高度（确保包括任何边距或填充）。然后执行高度调整动画函数（在 jquery 中，类似
$('h3').animate({height: heightVar});）鼠标悬停会触发一个恢复 h3 高度的函数到 100 像素。这是一个示例： http://jsfiddle.net/XR9fb/
You can nest a div inside the h3 that contains the content and then use the h3 as a masking container (use overflow:hidden). When the user mouses over, fire a function that get's the height of the interior div (make sure to include any margins or padding). Then execute you height adjust animate function (In jquery, something like
$('h3').animate({height: heightVar});)The mouseout fires a function that restores the height of the h3 back to 100px.Here's a sample: http://jsfiddle.net/XR9fb/
您可以使用
scrollHeight属性获取元素的真实高度。现在，我对 jQuery 不太了解，但我想你可以调用 animate 将高度 CSS 属性设置为鼠标悬停时元素的scrollHeight，然后返回到原始状态鼠标移出时的高度。如果元素的高度不固定，您可以在显示完整元素之前将当前高度保存在某处，当鼠标离开该元素时，您只需恢复此状态。
You can get the real height of the element with the
scrollHeightproperty. Now, I don't really know much of jQuery, but I imagine you could just call animate to set the height CSS property to thescrollHeightof the element when the mouse hovers it, and return to the original height when the mouse moves out of it.If the height of the element isn't fixed, you can salve the current height somewhere before displaying the full element, and when the mouse leaves the element you just restores this state.