我怎樣才能提高這個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

我看到你不止一次地選擇了相同的元素。我建議你將其保存爲局部變量和調用變量：

var arrow_top = $('#toparrow'); 

在白色的空間，你的代碼塊刪除：

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



function slidedrag() { 

末，避免做了動畫。