이 jquery 애니메이션 코드의 성능을 향상시키는 방법은 무엇입니까?

Question

요소 위로 마우스를 가져 가면 주위에 네 개의 화살표가 추가되고 앞뒤로 움직 이도록 애니메이션이 반복되는 코드를 작성했습니다.

이것은 요소가 드래그 가능한 것을 시각적으로 보여줍니다. 사용자가 요소 위로 마우스를 가져 가려고 할 때 화살표 만 그리기 위해 hoverIntent 플러그인을 사용하고 있습니다. 나는 또한 요소 배치를 위해 jQueryUI를 사용하고있다.

문서에 항목을 추가 한 다음 애니메이션을 적용하는 것은 이전에 해본 적이없는 무언가이며 성능을 최적화하지 못하게 코딩했음을 확신합니다.

어떻게이 코드의 성능을 향상시킬 수 있습니까?

jQuery.fx.interval = 1; 

// Add Hover arrows 
$('.table-row.songnamecolumn').livequery(function($songRow) { 
    var $songRow = $(this).closest('tr').children('td'); 
    var $appenditem = $(this); 
    var $this = $(this); 

    var loop = function loop(){ 
     $('#toparrow').animate({ top:'-=15px'},500).animate({ top:'+=15px'},100); 
     $('#bottomarrow').animate({ top:'+=15px'},500).animate({ top:'-=15px'},100); 
     $('#leftarrow').animate({ left:'-=15px'},500).animate({ left:'+=15px'},100); 
     $('#rightarrow').animate({ left:'+=15px'},500).animate({ left:'-=15px'},100); 
    } 

    $(this).hoverIntent({ 
     sensitivity: 3, // How sensitive the hoverIntent should be 
     interval: 200, // How often in milliseconds the onmouseover should be checked 
     over: slidedrag, // Function to call when mouseover is called  
     timeout: 200, // How often in milliseconds the onmouseout should be checked 
     out: slidedragback // Function to call when mouseout is called  
    }); 

    function slidedrag() { 
     $('<div id="toparrow"></div>' 
     +'<div id="leftarrow"></div>' 
     +'<div id="rightarrow"></div>' 
     +'<div id="bottomarrow"></div>').appendTo($appenditem); 

     $('#toparrow').position ({ 
      of: $this, 
      my: 'center top', 
      at: 'center top', 
      offset: "0 -18" 
     }) 

     $('#bottomarrow').position ({ 
      of: $(this), 
      my: 'center bottom', 
      at: 'center bottom', 
      offset: "0 18" 
     }) 

     $('#leftarrow').position ({ 
      of: $(this), 
      my: 'left center', 
      at: 'left center', 
      offset: "-10 0" 
     }) 

     $('#rightarrow').position ({ 
      of: $(this), 
      my: 'right center', 
      at: 'right center', 
      offset: "10 0" 
     }) 

     $('#toparrow, #bottomarrow, #leftarrow, #rightarrow').animate({opacity:'0.5'},600); 
     setInterval(loop, 600); 
    } 

    function slidedragback() { 
     clearInterval(loop); 
     $('#toparrow, #bottomarrow, #leftarrow, #rightarrow').animate({opacity:'0'},600); 
     $('#toparrow,#bottomarrow,#leftarrow,#rightarrow').remove(); 
    } 
}); 

Answer 1

동일한 요소를 두 번 이상 선택합니다. 난 당신이 지역 변수로 저장하는 것이 좋습니다 및 변수 기억 : 애니메이션을 통해 일을하지 않도록,

out: slidedragback // Function to call when mouseout is called  
}); 



function slidedrag() { 

마지막 :

var arrow_top = $('#toparrow'); 

는 코드 블록에 공백을 통해 제거한다.