а вот что бы срабатывал нужный article надо делать так

$(function(){

$('.magic-box img').hover(function(){
        header = $(this).closest('article').find('h2 a');
		$(this).animate({"background-color":"#000"}, 300),
		header.animate({"color":"#ddd"}, 300);
	}, function(){
        header = $(this).closest('article').find('h2 a');
		$(this).animate({"background-color":"#fff"}, 300),
		header.animate({"color":"#000"}, 300);
	})
	})

Но если в Вашем примере переместить переменную header перед hover, то эту переменную приходится опять объявлять в каждом mouseenter/leave...
Мне нужна универсальная переменная, чтобы вызывать её и в других hover().
Но

var header = $(this).find('article').find('h2 a');

выбирает сразу все заголовки, а не один конкретный.

thegreatwhitedope,
Объявите переменную так

var header;

А присваивание производите первым действием по событию наведения

$('.magic-box img').hover(function(){
 header = $(this).find('article').find('h2 a')

Спасибо, ОлегА и Deff!
Теперь всё как надо.

Апну тему :)
Написал скриптик, но мне кажется что он очень громоздкий, нелогичный и вообще фекало-год :-?
Подскажите, можно ли все это реализовать более изящно?

<article>
	<div class="magic-box">
		<a href="#"><img src="img/concert.jpg" alt="concert.jpg" /></a>
		<p><a href="#">competition</a></p>
  </div>
        <h2><a href="#">Win tickets to Rock en Seine with Frankphonik</a></h2>
	<h6>written by: <span>Mike Shaw</span> published on <span>August 02 2011</span></h6>
	<p>Radio stations and TV music channels are all well and good, but they tend to be a little bit insular. 
			      They will cover a little bit of new music, but 99% of the time it is from British or American artists  meanwhile the rest of 
			      the world is out there making...</p>
</article>

$(function(){
	var header,
		discription,
		img;
	
$('.magic-box img').hover(function(){
		header = $(this).closest('article').find('h2 a');
		discription = $(this).parents('.magic-box').children('p').children('a');
			$(this).stop().animate({"background-color":"#f26c00"}, 350),
			discription.stop().animate({"color":"#fff", "background-color":"#f26c00"}, 350),
			header.stop().animate({"color":"#f26c00"}, 350);
	}, function(){
		$(this).stop().animate({"background-color":"#fff"}, 350),
		discription.stop().animate({"color":"#fff", "background-color":"#000"}, 350),
		header.stop().animate({"color":"#000"}, 350);
	})
	$('article h2 a').hover(function(){
		discription = $(this).parents('article').find('.magic-box').find('p a');
		img = $(this).parents('article').find('.magic-box').find('img');
			$(this).stop().animate({"color":"#f26c00"}, 350),
			discription.stop().animate({"color":"#fff", "background-color":"#f26c00"}, 350),
			img.stop().animate({"background-color":"#f26c00"}, 350);
	}, function(){
			$(this).stop().animate({"color":"#000"}, 350),
			discription.stop().animate({"color":"#fff", "background-color":"#000"}, 350),
			img.stop().animate({"background-color":"#fff"}, 350);
	})
        })

Мне не нравится, например, что переменную discription приходиться объявлять по-новой и к тому же присваивать ей разные селекторы. Выходит, что если x-элемент запускает событие, а я хочу, чтобы это событие распространялось на y-элемент, то я указываю путь до y-элемента относительно x-элемента( при условии что у меня несолько пар таких x и y элементов), используя this. Сумбурно как-то получилось) Хотелось бы иметь одну переменную на все случаи. Возможно ли это реализовать? Понимаю, что это всё это по причине моего незнания и поэтому прошу помощи :)

Можно вынести общую функцию

function SetAndAnime (Sel,color1,color2,color3,color4){
	        Sel.stop().animate({"background-color":color1}, 350),
	        discription.stop().animate({"color":color2, "background-color":color3}, 350),
	        header.stop().animate({"color":color4}, 350);
}