I've written some code that when I hover over an element, adds four arrows around it and loops an animation so that they move back and forwards.
This is to visually show that the element is draggable. I am using the hoverIntent
plugin to only draw the arrows when the user intends to hover over the element. I am also using jQueryUI for the element positioning.
Appending an item to the document and then animating it is something I have never done before and I am certain that I have coded this poorly causing the performance to be less than optimal.
How could I go about making this code perform better?
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();
}
});
I see you're selecting the same elements more than once. I suggest you to store them as local variable and recall the variable:
var arrow_top = $('#toparrow');
Remove over white space in you code block:
out: slidedragback // Function to call when mouseout is called
});
function slidedrag() {
Last, avoid doing over animations.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.