прошу помощи в оптимизации кода, спер кружечки с google+ ток увеличение у них там на канвасе, а я сделал js, прошу знающих подсказать как его оптимизировать, заранее спасибо HTML: <!DOCTYPE HTML> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> /** * hoverIntent r6 // 2011.02.26 // jQuery 1.5.1+ * <http://cherne.net/brian/resources/jquery.hoverIntent.html> * * @param f onMouseOver function || An object with configuration options * @param g onMouseOut function || Nothing (use configuration options object) * @author Brian Cherne brian(at)cherne(dot)net */ (function($){$.fn.hoverIntent=function(f,g){var cfg={sensitivity:7,interval:100,timeout:0};cfg=$.extend(cfg,g?{over:f,out:g}:f);var cX,cY,pX,pY;var track=function(ev){cX=ev.pageX;cY=ev.pageY};var compare=function(ev,ob){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);if((Math.abs(pX-cX)+Math.abs(pY-cY))<cfg.sensitivity){$(ob).unbind("mousemove",track);ob.hoverIntent_s=1;return cfg.over.apply(ob,[ev])}else{pX=cX;pY=cY;ob.hoverIntent_t=setTimeout(function(){compare(ev,ob)},cfg.interval)}};var delay=function(ev,ob){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t);ob.hoverIntent_s=0;return cfg.out.apply(ob,[ev])};var handleHover=function(e){var ev=jQuery.extend({},e);var ob=this;if(ob.hoverIntent_t){ob.hoverIntent_t=clearTimeout(ob.hoverIntent_t)}if(e.type=="mouseenter"){pX=ev.pageX;pY=ev.pageY;$(ob).bind("mousemove",track);if(ob.hoverIntent_s!=1){ob.hoverIntent_t=setTimeout(function(){compare(ev,ob)},cfg.interval)}}else{$(ob).unbind("mousemove",track);if(ob.hoverIntent_s==1){ob.hoverIntent_t=setTimeout(function(){delay(ev,ob)},cfg.timeout)}}};return this.bind('mouseenter',handleHover).bind('mouseleave',handleHover)}})(jQuery); </script> <script type="text/javascript"> $(function(){ /* drawCircle() selector : селектор jQuery, который определяет элемент или массив элементов center : центр окружности radius : радиус окружности angle: угол внутри окружности x: смещение влево всех точек окружности y: смещение по вертикали всех точек окружности Использование: CSS: .box { background-color:red; height:90px; width:90px; position:absolute; margin:5px;} JS:drawCircle('.box', 50, 200, 90, 310, 220); */ function drawCircle(selector, center, radius, angle, x, y) { var total = $(selector).length; var alpha = Math.PI * 2 / total; $(selector).each(function(index) { var theta = alpha * index; var pointx = Math.floor(Math.cos( theta ) * radius); var pointy = Math.floor(Math.sin( theta ) * radius ); // Выводим координаты X и Y $(this).css('margin-left', pointx + x + 'px'); $(this).css('margin-top', pointy + y + 'px'); }); } $('.circle').find('.CiText > div').css({ top:$('.circle').height()/2-$('.circle').find('.CiText > div').height()/2, left:$('.circle').width()/2-$('.circle').find('.CiText > div').width()/2 }) var position = $('.circle').position(); position.top=29; position.left=29; drawCircle('.CiFrend > div', 0, 68, 90, 77, 76); $('.circle').hoverIntent(function(){ $(this).addClass('CiOpen') .css({'top':position.top, 'left':position.left}); $(this).animate({ 'height':182, 'width':182, 'top':0, 'left':0 },100,function(){ //$(this).removeClass('CiClose'); $(this).find('.CiFrend > div').fadeIn(200) }) .find('.CiText > div').animate({ 'top':182/2-$(this).find('.CiText > div').height()/2, 'left':182/2-$(this).find('.CiText > div').width()/2+1 },100) } ,function(){ //$(this).addClass('CiClose'); $(this).find('.CiFrend > div').hide(); $(this).animate({ 'height':125, 'width':125, 'left':position.left, 'top':position.top },100,function(){ $(this) .css({'top':0, 'left':0}) .removeClass('CiOpen') $(this).find('.CiFrend > div').hide(); }) $(this).find('.CiText > div').animate({ 'top':125/2-$(this).find('.CiText > div').height()/2, 'left':125/2-$(this).find('.CiText > div').width()/2 },100) } ) }) </script> <style type="text/css"> .row_circle{ display: inline-block; position: relative; width: 150px; height: 183px; padding: 1px; position: relative; vertical-align: top; } .circle{ overflow: hidden; } .CiClose{ background-repeat: no-repeat; border-radius: 63px 63px 63px 63px; height: 125px; margin: 31px; position: relative; vertical-align: top; width: 125px; z-index: 5; background-image: url("//ssl.gstatic.com/s2/oz/images/sge/personal_circle_closed.png"); } .CiOpen{ background-repeat: no-repeat; border-radius: 92px 92px 92px 92px; /* height: 183px; width: 183px;*/ margin: 2px; position: relative; vertical-align: top; z-index: 2; background: url("//ssl.gstatic.com/s2/oz/images/sge/personal_circle_open.png") no-repeat scroll center center transparent; } .circle .CiText > div{ color: #FFFFFF; cursor: pointer; font-size: 13px; position: relative; text-align: center; width: 88px; text-shadow:none; } .circle .CiText > div span{ display: block; } .circle .CiText > div div{ font-size: 16px; font-weight: bold; margin-top: 4px; opacity: 0.5; } .CiFrend > div{ background-position: center center; background-repeat: no-repeat; background-size: 30px auto; border-radius: 15px 15px 15px 15px; cursor: url("//ssl.gstatic.com/s2/oz/images/sge/openhand_8_8.cur"), move; height: 30px; left: 0; overflow: hidden; position: absolute; top: 0; width: 30px; display:none; } </style> </head> <body> <div class="block_circle"> <div class="row_circle"> <div class="circle CiClose"> <div class="CiText"> <div> <span class="name_circle">Друзья</span> <div class="count_frend">0</div> </div> </div> <div class="CiFrend"> <div style="background-image: url('//lh6.googleusercontent.com/-918KWvf6KsU/AAAAAAAAAAI/AAAAAAAAAHE/rew9eGIt00g/photo.jpg?sz=48');"> <img style="display:none"/> </div> <div style="background-image: url('//lh6.googleusercontent.com/-918KWvf6KsU/AAAAAAAAAAI/AAAAAAAAAHE/rew9eGIt00g/photo.jpg?sz=48');"> <img style="display:none"/> </div> <div style="background-image: url('//lh6.googleusercontent.com/-918KWvf6KsU/AAAAAAAAAAI/AAAAAAAAAHE/rew9eGIt00g/photo.jpg?sz=48');"> <img style="display:none"/> </div> <div style="background-image: url('//lh6.googleusercontent.com/-918KWvf6KsU/AAAAAAAAAAI/AAAAAAAAAHE/rew9eGIt00g/photo.jpg?sz=48');"> <img style="display:none"/> </div> <div style="background-image: url('//lh6.googleusercontent.com/-918KWvf6KsU/AAAAAAAAAAI/AAAAAAAAAHE/rew9eGIt00g/photo.jpg?sz=48');"> <img style="display:none"/> </div> </div> </div> </div> </div> <div class="block_circle"> <div class="row_circle"> <div class="circle CiClose"> <div class="CiText"> <div> <span class="name_circle">Друзья</span> <div class="count_frend">0</div> </div> </div> <div class="CiFrend"> <div style="background-image: url('//lh6.googleusercontent.com/-918KWvf6KsU/AAAAAAAAAAI/AAAAAAAAAHE/rew9eGIt00g/photo.jpg?sz=48');"> <img style="display:none"/> </div> <div style="background-image: url('//lh6.googleusercontent.com/-918KWvf6KsU/AAAAAAAAAAI/AAAAAAAAAHE/rew9eGIt00g/photo.jpg?sz=48');"> <img style="display:none"/> </div> <div style="background-image: url('//lh6.googleusercontent.com/-918KWvf6KsU/AAAAAAAAAAI/AAAAAAAAAHE/rew9eGIt00g/photo.jpg?sz=48');"> <img style="display:none"/> </div> <div style="background-image: url('//lh6.googleusercontent.com/-918KWvf6KsU/AAAAAAAAAAI/AAAAAAAAAHE/rew9eGIt00g/photo.jpg?sz=48');"> <img style="display:none"/> </div> <div style="background-image: url('//lh6.googleusercontent.com/-918KWvf6KsU/AAAAAAAAAAI/AAAAAAAAAHE/rew9eGIt00g/photo.jpg?sz=48');"> <img style="display:none"/> </div> </div> </div> </div> </div> </body> </html> [js][/js][js][/js]