jQuery Animate on mouseenter和Page Refresh
[英]jQuery Animate on mouseenter and Page Refresh
问题描述
我有一个简单的颜色动画与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');
}
});
});
它非常好。 但是，动画是用于菜单项。 如果鼠标位于某个项目上，则动画开始。 然后单击鼠标，页面将刷新。 鼠标在链接上，但它没有移动。 当鼠标移动一个像素时，鼠标中心事件被触发（即使鼠标已经在链接上）并且有动画我认为是一个错误。
我需要一些想法：
$(this).bind({ mouseenter: function(e) {
if( __ mouse is not already over $(this) __ )
$(this).animate(...); } });
我尝试过在mouseenter上设置一些状态，鼠标悬停但是..没办法
编辑：
完整的例子。 将其保存为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>
2 个解决方案
解决方案1
2 已采纳 2012-12-16 23:02:26
对不起，我在手机上，所以代码可能是错误的（未经过测试）。
已编辑 （现已测试）
// fix: bind mousemove to document, not links, sorry!
$(document).bind('mousemove', function(event) {
$('.fx_link').bind('mouseenter', function(event) {
//....
}
$(this).unbind(event);
});
EDITED
完整示例，处理2个不同的mouseEnters，如果[在页面刷新]鼠标已经在链接内部（只是设置颜色），一个来自外部（动画颜色）。
通过在开始时为所有链接设置originalColors来修复originalColors错误。
使用命名函数而不是匿名函数，因此很容易解除绑定（并且看起来也更清晰）。
这是代码：
<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(){
var $links=$('.fx_link');
// save ALL originalColors so they are fixed forever
$links.each(function() {$(this).attr('originalColor', $(this).css('color'));});
$(document).bind('mousemove', handleMove);
$links.bind('mouseenter', firstMouseEnter);
$links.bind('mouseleave', anyMouseLeave);
function handleMove(event) { // When mouse moves in document
console.log("first move - setting up things..");
$(document).unbind('mousemove',handleMove); // remove myself (no need anymore)
$links.bind('mouseenter', otherMouseEnter); // istall second mouseenter
$links.unbind('mouseenter',firstMouseEnter); // remove first mouseenter
}
function firstMouseEnter(event) { // Called before mouse is moved in document
console.log("first enter");
$(this).css('color','#999');
}
function otherMouseEnter(event) { // Called after mouse is moved in document
console.log("other enter");
$(this).animate({ color: "#999" }, 'fast');
}
function anyMouseLeave(event) {
console.log("leave");
$(this).animate({ color: $(this).attr('originalColor') }, 'fast');
}
});
</script>
<body>
<a class="fx_link" href="h.html">this is a link</a>
</body>
</html>
解决方案2
1 2012-12-16 22:49:49
当它悬停在其上时，重点是将菜单项用“fx_link”类淡化为另一种颜色吗？ 在这种情况下，您很可能只使用.fx_link：hover的css3过渡。 然后，您可以根据需要自定义转换。
a.fx_link{
color:red;
-webkit-transition-property: color;
-webkit-transition-duration: 2.5s;
-webkit-transition-timing-function: linear;
-moz-transition-property: background color;
-moz-transition-duration: 2.5s;
-moz-transition-timing-function: linear;
-o-transition-property: color;
-o-transition-duration: 2.5s;
-o-transition-timing-function: linear;
-ms-transition-property: background color;
-ms-transition-duration: 2.5s;
-ms-transition-timing-function: linear;
transition-property: color;
transition-duration: 2.5s;
transition-timing-function: linear;
}
a.fx_link:hover{
color:blue;
-webkit-transition-property: color;
-webkit-transition-duration: 2.5s;
-webkit-transition-timing-function: linear;
-moz-transition-property: background color;
-moz-transition-duration: 2.5s;
-moz-transition-timing-function: linear;
-o-transition-property: color;
-o-transition-duration: 2.5s;
-o-transition-timing-function: linear;
-ms-transition-property: background color;
-ms-transition-duration: 2.5s;
-ms-transition-timing-function: linear;
transition-property: color;
transition-duration: 2.5s;
transition-timing-function: linear;
}
Jquery在mouseenter上进行动画制作
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.