我有这个菜单
<div id="toptest"></div><div id="cover" style="position:relative;z-index:800;">
<div id="header">
Lumen Photography
</div>
<div class="wrapper">
<ul id="navigation">
<li><a href="#" alt="toptest" class="subinfo">Home<span>Welkom!</span></a></li>
<li><a href="#" alt="wie" class="subinfo">Wie zijn we<span>Info over ons</span></a></li>
<li><a href="#" alt="contact" class="subinfo">Contact<span>(Aan)vraag</span></a></li>
<li><a href="#" alt="ref" class="subinfo">Referenties<span>Enkele namen...</span></a></li>
</ul>
</div>
</div>
<div style="position:fixed;width:100%;top:0px;z-index:600;box-shadow:0px 0px 6px black">
<div id="mainmenu">
<ul id="yw0">
<li><a href="#" alt="toptest" class="subinfo">Home</a></li>
<li><a href="#" alt="wie" class="subinfo">Wie zijn we</a></li>
<li><a href="#" alt="contact" class="subinfo">Contact</a></li>
<li><a href="#" alt="ref" class="subinfo">Referentie</a></li>
这是2个菜单。它们实际上是相同的,但是其中一个是落后于其他的并且如果向下滚动则显示(我不想使用滚动时出现的半固定标题。慢速放在电脑上)。
这个javascript声明:
<script src="js/jquery.scrollTo-1.4.3.1.js"></script>
<script src="js/jqueryui.js"></script>
<script src="js/jquery.animate-colors.js"></script>
<script src="js/jquery.slides.min.js"></script>
和jquery.js完全在顶部声明。
我有 var co; $( 'subinfo')。悬停( 功能(){ co = $(this).css('color'); $(this).children()。stop()。animate({opacity:1},200); $(this).children().animate({color:returnColor()},100);
$(this).stop().animate({color:returnColor()},100);
},
function(){
$(this).children('span').stop().animate({opacity:0}, 200);
$(this).stop().animate({backgroundColor:'rgba(255, 255, 255, 0)', color:co});
}
);
作为事件监听器。
在chrome中,它有效。在Firefox中,它只是悬停,但不会离开。它给了我错误:typeError:begin是未定义的(r:76 in animate-colors)但是动画颜色是一个jquery插件。我以前用过它,我从来没有遇到过这个问题..
做什么?
答案 0 :(得分:0)
好吧,似乎firefox需要知道你动画元素的初始background-color
。所以你必须在动画开始之前添加它:
.subinfo {
background-color:white;
}
如果要为颜色设置动画,了解最终颜色和初始颜色非常重要。我不知道为什么Chrome没有失败或者使用什么颜色作为起点...
它应该可以使用,如果没有,发布一个jsFiddle:http://jsfiddle.net/