Выбор одного элемента jQuery для определенного класса для анимации

Question

У меня есть несколько div, которым назначается класс под названием projectContainer, который по существу делает каждый div определенным размером и устанавливает фон в белый цвет. Я хочу иметь возможность, зависая над любым из разделов этого класса, оживить THAT SPECIFIC div. Следующий код будет анимировать все с этим классом, меняя цвет от белого до красного при наведении на:

$(".projectContainer").hover(function(){ 
$(".projectContainer").animate({ 
    backgroundColor:'rgb(189,29,54)'},100); 
}, 
function(){ 
$(".projectContainer").animate({ 
    backgroundColor:'#FFF'},100); 
}); 

Через мое элементарное знание JQuery, я понял, что-то вроде этого позволит мне сделать то, что мне нужно.

$(*.projectContainer).hover(function(){ 
$(this.id).animate({ 
    backgroundColor:'rgb(189,29,54)'},100); 
}, 
function(){ 
$(this.id).animate({ 
    backgroundColor:'#FFF'},100); 
}); 

Весь код jQuery помещается в голову документа. Я мог бы сделать это легко, если бы я назначил каждому div id и вручную закодировал анимацию для каждого идентификатора, но я бы хотел, чтобы он работал автоматически, если я добавляю больше div этого класса. Я чувствую, что что-то подобное может работать, если поместить в фактические div, но я хочу, чтобы это было проще, просто имея одну функцию в голове, очевидно.

Answer 1

Попробуйте следующее:

$(.projectContainer).hover(function(){ 
$(this).animate({ 
    backgroundColor:'rgb(189,29,54)'},100); 
}, 
function(){ 
$(this).animate({ 
    backgroundColor:'#FFF'},100); 
});