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 });
});
...作品,但页面上加载的元素开始在全高度。
在页面加载时缩小页面的最佳方法是什么?
试试这样,最好能理解。检查小提琴的例子。通过这种方式,你甚至可以添加像改变背景颜色等动画效果.....
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);
});
对于其他人来说,'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 });
});
});
我很好奇,看看有没有办法做到这一点,但没有动画加载后,虽然。
你已经说过每个元素的高度并不是事先知道的。因此,您的一个问题是如何在加载时捕获每个元素的自然高度,但仍然找到一种方法,仅在缩小到固定折叠大小后才显示该元素(避免每个元素都以其全尺寸显示) 。
一种可能的策略是将对象呈现为其自然大小,但在视口之外 - 例如,水平移动了-1000像素。捕获并存储它们的尺寸,然后将它们缩小到固定的40像素高度,然后将它们重新放回其常规视口位置。如果所有对象都位于某种容器元素中,则可以简单地移动该元素。
有趣的问题。在加载页面之前是否有机会知道渲染的高度/宽度?或者有什么机会可以在页面加载后缩小它们?我不积极如何解决这个问题。 – mrtsherman 2012-01-30 04:18:01
我不知道元素的高度。事实上,我有很多这样的人,他们都是不同的身高,这取决于他们所包含的内容。我不知道如何在页面加载后使它们缩小。 – St0rM 2012-01-30 04:21:21
@ Ken:确实。 – St0rM 2012-01-30 04:36:32