我在这里找到了一段有用的代码。我真的希望有人能帮助我。
这是代码:
$(function(){
$('#header_nav').data('size','big');
});
$(window).scroll(function(){
if($(document).scrollTop() > 0)
{
if($('#header_nav').data('size') == 'big')
{
$('#header_nav').data('size','small');
$('#header_nav').stop().animate({
height:'40px'
},600);
}
}
else
{
if($('#header_nav').data('size') == 'small')
{
$('#header_nav').data('size','big');
$('#header_nav').stop().animate({
height:'100px'
},600);
}
}
});
http://jsfiddle.net/JJ8Jc/76/
问题:如何仅在悬停(而不是滚动)上做同样的事情?
多谢。
它比你想象的要简单得多。
(1) $('#header_nav').data('size','small');
关于(1),您粘贴的确切代码片段实际上只是添加一个数据属性,我猜您不需要该属性,因为您在网上找到了代码。
(2) $('#header_nav').stop().animate({
关于 (2),.stop() 只是突然停止动画而不让它完成
关键是针对鼠标进入如下所示的div的事件:
$("#header_nav").mouseenter(function(){
然后在它离开时再次为您提供如下所示的鼠标悬停效果:
$("#header_nav").mouseleave(function(){
我已经剥离了代码,以使其尽可能简单,以便您阅读(下面的演示)
演示
这是不言自明的,在mouseenter/mouseleave上"动画"(逐渐减少/增加)容器的高度。