我有一个带有jquery.color的简单彩色动画。这是我的代码:
$(document).ready(function(){
$('.fx_link').bind({
mouseenter: function(e) {
$(this).attr('originalColor', $(this).css('color'));
$(this).animate({ color: "#999999" }, 'fast');
},
mouseleave: function(e) {
$(this).animate({ color: $(this).attr('originalColor') }, 'fast');
$(this).removeAttr('originalColor');
}
});
});
它非常好。但是,动画是针对菜单项的。如果鼠标在某个项目上,则动画开始。然后鼠标点击,页面刷新。鼠标在链接上,但它没有移动。只要鼠标移动一个像素,就会触发 mouseenter 事件(即使鼠标已经在链接上)并且有一个我认为是错误的动画。
我需要一些想法,例如:
$(this).bind({ mouseenter: function(e) {
if( __ mouse is not already over $(this) __ )
$(this).animate(...); } });
我已经尝试在 mouseenter、mouseover 上设置一些状态,但是......没办法
编辑:
完整的例子。将此另存为h.html
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://code.jquery.com/color/jquery.color-2.1.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.fx_link').bind({
mouseenter: function(e) {
console.log("enter");
$(this).attr('originalColor', $(this).css('color'));
$(this).animate({ color: "#999999" }, 'fast');
},
mouseleave: function(e) {
console.log("leave");
$(this).animate({ color: $(this).attr('originalColor') }, 'fast');
$(this).removeAttr('originalColor');
}
});
});
</script>
<body>
<a class="fx_link" href="h.html">this is a link</a>
</body>
</html>