Has anyone ever came accross this issue

[Shadowing]

For some reason all animation lags on my site when the mouse moves. It doesnt lag on my home page www.stargatesystemlords.com but it does inside the game java script animation and the animation people use for pictures even i cant find any google topics on it or anything. MIght not be using the right search words. wondering if anyone has any ideas or thoughts. Would really appreciate it im at a wall here.

Edited August 30, 2012 by Shadowing

[justsomeguy]

What are you using for animation? Are you just using Javascript to move images and things around or something like canvas or WebGL?

[Shadowing]

ya im using java script on my home page but even pictures lag. you know how people make gif pictures that have animation in them?also just doing a simple fade in fade out lags with jquery. Its really wierd. Only lags when the mouse is moving. i did read something faintly where lag happends when having stuff inside certain types of tags that is like floated but i dont know.Was hoping maybe someone knows of a obviously issue that can happen with out seeing any code can to much java script on the page cause it maybe? The lag happends even if i disable any java scrip that is running. disabled all setTimeout() and any loops and it still does it. only way i can think to start solving it is just make a new page and comment everything out then slowly add stuff in to see if it still does it

[Shadowing]

Ahh i figured out the problem. This function is causing my lag. makes windows pop up when hover over

 var minMargin = 15; // set how much minimal space there should be (in pixels)				    // between the popup and everything else (borders, mouse)var ready = false;  // we are ready when the mouse event is set upvar default_width = 200; // will be set to width from css in document.ready// Prepare popup and define the mouseover callbackjQuery(document).ready(function(){    $('body').append('<div id="pup" style="position:abolute; display:none; z-index:200;"></div>');    css_width = $('#pup').width();    if (css_width != 0) default_width = css_width;    // set dynamic coords when the mouse moves    $(document).mousemove(function(e){	    var x,y;	 	    x = $(document).scrollLeft() + e.clientX;	    y = $(document).scrollTop() + e.clientY;	    x += 10; // important: if the popup is where the mouse is, the hoverOver/hoverOut events flicker	 	    var x_y = nudge(x,y); // avoids edge overflow	 	    // remember: the popup is still hidden	    $('#pup').css('top', x_y[1] + 'px');	    $('#pup').css('left', x_y[0] + 'px');    });    ready = true;});// The actual callback:// Write message, show popup w/ custom width if necessary,// make sure it disappears on mouseoutfunction popup(msg,tag,width){      if (ready) {	    // use default width if not customized here	    if (typeof width === "undefined"){		    width = default_width;	    }	    // write content and display	    $('#pup').html(msg).width(width).show();	    // make sure popup goes away on mouse out	    // the event obj needs to be gotten from the virtual	    //   caller, since we use onmouseover='popup(msg)'	   	    //var t = getTarget(arguments.callee.caller.arguments[0]);	    $(tag).hover(		    function(e){			    $('#pup').hide().width(default_width);		    }		    );		   	       } } // Avoid edge overflowfunction nudge(x,y){    var win = $(window);       // When the mouse is too far on the right, put window to the left    var xtreme = $(document).scrollLeft() + win.width() - $('#pup').width() - minMargin;    if(x > xtreme) {	    x -= $('#pup').width() + 2 * minMargin;    }    x = max(x, 0);    // When the mouse is too far down, move window up    if((y + $('#pup').height()) > (win.height() +  $(document).scrollTop())) {	    y -= $('#pup').height() + minMargin;    }    return [ x, y ];}// custom maxfunction max(a,{    if (a> return a;    else return b;}// Get the target (element) of an event.function getTarget(e) {    var targ;    if (!e) var e = window.event;    if (e.target) targ = e.target;    else if (e.srcElement) targ = e.srcElement;    if (targ.nodeType == 3) // defeat Safari bug	    targ = targ.parentNode;    return targ;} 

[ShadowMage]

only way i can think to start solving it is just make a new page and comment everything out then slowly add stuff in to see if it still does it

That's usually a good way to go about troubleshooting problems. It can pinpoint where the problem actually is. As for the lag however, JavaScript-powered animations and such are pretty vulnerable to lag issues. JS is not really optimized for that sort of thing. The reason you're seeing the lag only when the mouse is moving is probably due to the onmousemove event firing. That event fires many, many times per second. The sheer number of times it fires is enough to lag a JS intensive application, and the effect is multiplied if you have a handler registered for that event. EDIT: Ah, I see you already figured out your lag issue... Edited August 30, 2012 by ShadowMage

[justsomeguy]

It looks like the mousemove event is the culprit, but trying to do animation with having Javascript manipulate the DOM frequently is eventually going to slow things down. In theory everything should work, but in practice there is a limit that is set by several variables including your browser, CPU, video hardware, etc where enough animation will just cause things to slow down. You're asking the browser to update the DOM and re-render the elements possibly several times a second, and there's just going to be a limit on how fast it can do that before it starts slowing down. Even canvas animations would eventually show performance issues. WebGL is designed for native 3D graphics in browsers but it's probably going to take a while before that really gets widely implemented and optimized. http://caniuse.com/webgl

[Shadowing]

i think the onmouse event is being triggered twice which is causing this The issue started happening when i started to use

$("a.planet_details").live('mouseenter' ,function() {

instead of using html attribute onmouseover