jQuery Animate on mouseenter和Page Refresh

时间:2012-12-16 22:26:33

标签: javascript jquery mouseevent

我有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 个答案:

答案 0 :(得分:2)

抱歉,我在手机上,因此代码可能有误(未经测试)。

已编辑(现已测试)

// 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>

答案 1 :(得分:1)

当它悬停在上面时,重点是将“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;
}