Question

我希望有一个固定的小高度的元素在鼠标悬停时扩展到他的全高，并在鼠标离开时收缩。

做类似的事情：

    $(".element").each(function() {
    $.data(this, 'size', { width: $(this).width(), height: $(this).height() });
}).hover(function() {
    $(this).stop().animate({ height: $.data(this,'size').height, 
                             width: $.data(this,'size').width });
}, function() {
    $(this).stop().animate({ height: 40, 
                             width: $.data(this,'size').width });
});

...有效，但在页面加载时，元素从全高开始。

在页面加载时缩小它的最佳方法是什么？

Answer 1

尝试这样，最好理解。检查小提琴的例子。通过这种方式，您甚至可以添加其他动画效果，例如更改背景颜色......

<强> CSS：

.div_small_height{
 height : 20px;
 width : 500px;
 background-color : red;
 overflow : hidden;
}
.div_full_height{
   width : 500px;
   background-color : blue;
}

<强> Jquery的：

$(".element").addClass('div_small_height'); // shrink it on page load
 // change on mouseenter and mouse leave
$(".element").hover(function(){
    $(this).switchClass("div_small_height","div_full_height",500);
},function(){
    $(this).switchClass("div_full_height","div_small_height",500);
});

小提琴示例：http://jsfiddle.net/7PV98/

Answer 2

您可以在页面加载后通过在文档准备好时调用hoverout代码来缩小它们。您可能希望为它们设置动画，以使它们在渲染时看起来很好。或者您可能只想直接设置高度。

$(document).ready( function() {
   $('element').each( function() {
      //store height and width
       $.data(this, 'size', { width: $(this).width(), height: $(this).height() });
      //shrink it
      $(this).animate({ height: 40, width: $.data(this,'size').width });
   });
});

我很想知道是否有办法在加载后没有动画的情况下这样做。

Answer 3

你已经说过，每个元素的高度都是事先不知道的。因此，您的一个问题是如何在加载时捕获每个元素的自然高度，但仍然找到一种方法，只有在它缩小到固定的折叠大小后才显示该元素（避免在每个元素的完整大小上简要显示）

一种可能的策略是将对象渲染为其自然大小，但在视口外部 - 例如，水平移动-1000像素。捕获并存储它们的尺寸，然后将它们缩小到固定的40px高度，然后最终将它们重新定位回常规的视口内位置。如果所有对象都在某种容器元素中，则可以简单地移动该元素。

jquery：mouseover加载状态

3 个答案: