Как я могу улучшить производительность этого кода анимации jquery - PullRequest
Новая
       14

Как я могу улучшить производительность этого кода анимации jquery

2 голосов
/ 18 ноября 2011

Я написал некоторый код, который при наведении курсора на элемент добавляет четыре стрелки вокруг него и циклически воспроизводит анимацию, чтобы они двигались назад и вперед.

Это визуально показывает, что элемент является перетаскиваемым. Я использую плагин 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();
    }
});

1 Ответ

0 голосов
/ 18 ноября 2011

Я вижу, вы выбираете одни и те же элементы более одного раза.Я предлагаю вам сохранить их как локальную переменную и вызвать переменную: 

var arrow_top = $('#toparrow');

Удалить над пробелами в вашем блоке кода: 

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



function slidedrag() {

Последнее, избегайте анимаций.

...