Показать сообщение отдельно
  #15 (permalink)  
Старый 07.02.2013, 11:25
Аватар для thegreatwhitedope
Интересующийся
Отправить личное сообщение для thegreatwhitedope Посмотреть профиль Найти все сообщения от thegreatwhitedope
 
Регистрация: 14.01.2013
Сообщений: 10

Апну тему
Написал скриптик, но мне кажется что он очень громоздкий, нелогичный и вообще фекало-год
Подскажите, можно ли все это реализовать более изящно?
<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. Сумбурно как-то получилось) Хотелось бы иметь одну переменную на все случаи. Возможно ли это реализовать? Понимаю, что это всё это по причине моего незнания и поэтому прошу помощи

Последний раз редактировалось thegreatwhitedope, 07.02.2013 в 11:55.
Ответить с цитированием