Home/ Questions/Q 9000141
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T00:16:24+00:00

I have a simple color animation with jquery.color . This is my code: $(document).ready(function(){

  • 0

I have a simple color animation with 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

EDIT:

full example. save this as 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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 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).

    • Fixed originalColors bug by setting originalColors for all the links at start.

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