jquery：mouseover加载状态

我想要一个具有固定的小高度的元素，可以在鼠标悬停时扩展到其全高，并在鼠标离开时收缩。jquery：mouseover加载状态

做这样的事情：

$(".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 }); 
});

...作品，但页面上加载的元素开始在全高度。

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

来源

2012-01-30 St0rM

有趣的问题。在加载页面之前是否有机会知道渲染的高度/宽度？或者有什么机会可以在页面加载后缩小它们？我不积极如何解决这个问题。 – mrtsherman 2012-01-30 04:18:01

我不知道元素的高度。事实上，我有很多这样的人，他们都是不同的身高，这取决于他们所包含的内容。我不知道如何在页面加载后使它们缩小。 – St0rM 2012-01-30 04:21:21

@ Ken：确实。 – St0rM 2012-01-30 04:36:32

试试这样，最好能理解。检查小提琴的例子。通过这种方式，你甚至可以添加像改变背景颜色等动画效果.....

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/

来源

2012-01-30 04:11:13

对于其他人来说，'switchClass'是jQuery UI库的一部分。您需要添加它才能使此代码正常工作。 – mrtsherman 2012-01-30 04:38:15

不知道.switchClass（）会为转换添加动画。伟大的解决方案，谢谢:-) – St0rM 2012-01-30 04:38:33

不客气的人... :) – 2012-01-30 04:40:45

你可以缩小页面加载后通过调用你的hoverout c当文件准备就绪时。你可能想要使它们动起来，以使它看起来很好，以防它们被渲染。或者你可能想直接设置高度。

$(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 }); 
    }); 
});

我很好奇，看看有没有办法做到这一点，但没有动画加载后，虽然。

来源

2012-01-30 04:26:15 mrtsherman

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

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

来源

2012-01-30 04:43:14

jquery：mouseover加载状态

回答

相关问题