CODEWITHSUNDEEP
javascriptjquerymouseevent
nkint
nkint

Reputation: 11743

jQuery Animate on mouseenter and Page Refresh

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>

Upvotes: 1

Views: 984

Answers (2)

FrancescoMM
FrancescoMM

Reputation: 2960

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>

Upvotes: 2

mToce
mToce

Reputation: 302

Is the point of this to fade the menu item with a class of "fx_link" to another color when it is hovered over? In that case you could most likely just use css3 transitions with .fx_link:hover. 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;
}

​

Upvotes: 1

Related Questions