我编写了一些代码,当我将鼠标悬停在一个元素上时,会在其周围添加四个箭头并循环动画,以便它们前后移动。
这是为了直观地显示元素是可拖动的。我使用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();
}
});