JQuery ссылка подталкивание и преобразование цвета

Question

Привет всем, я добился эффекта, описанного в заголовке, используя следующий код:

$(document).ready(function(){ 

$('.button').mousedown(function() { 
    $(this).animate({ 'top': '3px' }, 70); 
}); 
$('.button').mouseup(function() { 
    $(this).animate({ 'top': '0px' }, 70); 
}); 
$('.button').hover(function() { 
    $(this).stop().animate({ 
     color: '#fff', 
     backgroundColor: '#000' 
    }, 250); 
}); 
$('.button').mouseout(function() { 
    $(this).stop().animate({ 
     color: '#000', 
     backgroundColor: '#fff' 
    }, 250); 
}); 

});

Я уверен, что этот код можно значительно сократить, может ли кто-нибудь помочь мне? Обратите внимание, что я хочу, чтобы кнопка была анимирована при щелчке мыши и не возвращалась в исходное положение до тех пор, пока мышь не будет отпущена.

Приветствия

Answer 1

Ну для одной вещи вы не должны постоянно повторно генерировать объект JQuery вокруг селектора «.button»:

$('.button') 
    .mousedown(function() { 
    $(this).animate({ 'top': '3px' }, 70); 
    }) 
    .mouseup(function() { 
    $(this).animate({ 'top': '0px' }, 70); 
    }) 
    .hover(function() { 
    $(this).stop().animate({ 
     color: '#fff', 
     backgroundColor: '#000' 
    }, 250); 
    }, 
    function() { 
    $(this).stop().animate({ 
     color: '#000', 
     backgroundColor: '#fff' 
    }, 250); 
    }); 

Не делает его гораздо короче. Вы также можете рассмотреть возможность сделать это с помощью live() или delegate() вместо того, чтобы напрямую обращаться с кнопками. Вероятно, это то, что я сделал бы, так как ваш селектор здесь дешев, чтобы проверить, когда произойдет событие. Если у вас много кнопок (что, вероятно, было бы плохой идеей в любом случае, особенно если они все пульсируют и пульсируют при перемещении мыши), может быть немного медленнее назначить все обработчики.

редактировать — фиксированной благодаря @MvanGeest

Answer 2

Вы злоупотребляя .hover(). Из ссылки API:

Описание: Привязка два обработчика к соответствующих элементов, которые будут выполняться при указатель мыши входит и выходит элементы.

Так что это позволит ускорить процесс:

$('.button').hover(function() { 
    $(this).stop().animate({ 
     color: '#fff', 
     backgroundColor: '#000' 
    }, 250); 
}, function() { 
    $(this).stop().animate({ 
     color: '#000', 
     backgroundColor: '#fff' 
    }, 250); 
}); 

Но я считаю, что код не может действительно быть оптимизирована дальше. Вы можете использовать .bind() и хэш, но это только немного быстрее/лучше.