jQuery Animate on mouseenter和Page Refresh
[英]jQuery Animate on mouseenter and Page Refresh
问题描述
I have a simple color animation with jquery.color . 
我有一个简单的颜色动画与jquery.color 。 This is my code: 这是我的代码：
$(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');
}
});
});
And it is quite good. 它非常好。 But, the animation is for menu items. 但是，动画是用于菜单项。 If the mouse is on an item, the animation start. 如果鼠标位于某个项目上，则动画开始。 Then the mouse click and the page is refreshed. 然后单击鼠标，页面将刷新。 The mouse is on link but it is not moving. 鼠标在链接上，但它没有移动。 Sooner as the mouse moves just one pixel the mouseenter event is fired (even if the mouse is already on the link) and there is an animation that i consider a bug. 当鼠标移动一个像素时，鼠标中心事件被触发（即使鼠标已经在链接上）并且有动画我认为是一个错误。
I would need somethink like: 我需要一些想法：
$(this).bind({ mouseenter: function(e) {
if( __ mouse is not already over $(this) __ )
$(this).animate(...); } });
I have tried with some set state on mouseenter, mouseover but.. no way 我尝试过在mouseenter上设置一些状态，鼠标悬停但是..没办法
EDIT: 编辑：
full example. 完整的例子。 save this as h.html 将其保存为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
Sorry, I'm on mobile phone so the code might be wrong (not tested). 对不起，我在手机上，所以代码可能是错误的（未经过测试）。
EDITED (and tested now) 已编辑 （现已测试）
// fix: bind mousemove to document, not links, sorry!
$(document).bind('mousemove', function(event) {
$('.fx_link').bind('mouseenter', function(event) {
//....
}
$(this).unbind(event);
});
EDITED EDITED
Full example with handling of 2 different mouseEnters one if [at page refresh] mouse is already inside link (just set the color), one when coming from outside (animate color).
完整示例，处理2个不同的mouseEnters，如果[在页面刷新]鼠标已经在链接内部（只是设置颜色），一个来自外部（动画颜色）。 Fixed originalColors bug by setting originalColors for all the links at start.
通过在开始时为所有链接设置originalColors来修复originalColors错误。 Used named functions instead of anonymous functions so it was easy to unbind (and looks more clear too).
使用命名函数而不是匿名函数，因此很容易解除绑定（并且看起来也更清晰）。
Here is the code: 这是代码：
<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
Is the point of this to fade the menu item with a class of "fx_link" to another color when it is hovered over? 当它悬停在其上时，重点是将菜单项用“fx_link”类淡化为另一种颜色吗？ In that case you could most likely just use css3 transitions with .fx_link:hover. 在这种情况下，您很可能只使用.fx_link：hover的css3过渡。 Then you could customize the transition as needed. 然后，您可以根据需要自定义转换。
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;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.