个人中心
gpt4 book ai didi

javascript - 鼠标输入和页面刷新上的 jQuery Animate

转载 作者：行者123 更新时间：2023-11-30 13:11:01 25 4
gpt4 key购买 nike

我有一个简单的彩色动画 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>

最佳答案

抱歉，我在手机上，所以代码可能有误(未测试)。

已编辑(现已测试)

// fix: bind mousemove to document, not links, sorry!
$(document).bind('mousemove', function(event) {
    $('.fx_link').bind('mouseenter', function(event) {
         //....
    }
    $(this).unbind(event);
});

已编辑

  • 处理 2 种不同鼠标的完整示例如果 [在页面刷新时] 鼠标已经在链接内部(只需设置颜色)，另一种来自外部(动画颜色)。

  • 通过在开始时为所有链接设置 originalColors 修复了 originalColors 错误。

  • 使用命名函数而不是匿名函数，因此很容易解除绑定(bind)(而且看起来也更清晰)。

代码如下:

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

关于javascript - 鼠标输入和页面刷新上的 jQuery Animate，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13906095/

25 4 0
文章推荐： swift - Swift 中何时需要参数标签？
文章推荐： c# - 派生静态成员
文章推荐： C# 我可以取消另一个类中的对象吗
文章推荐： ios - ScrollView 停在某个点
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com