CODEWITHSUNDEEP
javascriptjqueryhtmlcssbrowser
Francisco
Francisco

Reputation: 254

the browser goes slowly when i use this

HTML:

<a class="myAnchor">asd1<img class="imagenmangue" alt="" src="/images/asd1.jpg" height="215" width="430""></a>

css:

a.myAnchor img{visibility:hidden}
a.myAnchor:hover img{visibility:visible}

Script:

/*  move the image  */
$('.myAnchor').hover(function(){     
  $(document).on( "mousemove", function( event ) {
  if ($( document ).width() > 800) {
     $(".imagenmangue").css({left: (event.pageX - $('.tabs_type_2').offset().left + 15),top: (event.pageY - $('.tabs_type_2').offset().top - 35)});
  }  else {
 };
});
}, function(){      
});

I´m doing this so the image moves with the mouse, when it is on the a:hover. But the browser goes slowly. How can i solve this?

Upvotes: 0

Views: 69

Answers (2)

jjjjjjjjjjjjjjjjjjjj
jjjjjjjjjjjjjjjjjjjj

Reputation: 3118

As pointed out by user epascarello, you can attach the event listener once to the element itself, rather than to add a new one to the document every time you hover .myAnchor. So instead of declaring it like this:

/* Every time .myAnchor gets hovered */
$('.myAnchor').hover(function(){     
    /* Create a new event listener that listens to the mouse movements inside the document */
    $(document).on( "mousemove", function( event ) {
        /* do stuff here */
    });
});

You can declare it like this:

/* When the mouse moves over .myAnchor */
$(document).on( "mousemove", ".myAnchor", function( event ) { 
    /* do stuff here */
}

I've created a JSFiddle with more a more in-depth explanation of what's going on in your code, you can check it out here: http://jsfiddle.net/M7bWS/

Upvotes: 0

epascarello
epascarello

Reputation: 207501

Every time you hover over the element you are adding a new event listener to the document! You are overloading the mousemove. You want to only add one mousemove event. Either remove the event when done or add the event once and set a flag when you want it to run.

Upvotes: 1

Related Questions