Как связать слайдер и меню?

Question

[Александр Донов]

<div id="slider">

<h1 class="b0"></h1>
<img class="b0" src="">

<h1 class="b1"></h1>
<img class="b1" src="">

<h1 class="b2"></h1>
<img class="b2" src="">

<h1 class="b3"></h1>
<img class="b3" src="">

</div>

***между ними html код***

<div id="menu">

<a class="a1">Первый</li>
<a class="a2">Второй</li>
<a class="a3">Третий</li>

</div>

Слайдер состоит из 4-х блоков(заголовок и фото).
По умолчанию первый блок слайдера b0 - opacity: 1; , остальные - opacity: 0;
НУЖНО:
Связать слайдер и меню условием, если

.a1:hover
тогда 
.b1{opacity:1;}  

.b0, 
.b2, 
.b3 {opacity:0;}

а2 и а3 соответственно.
Метод не имеет значения, главное, чтоб работало =)

Answer 1

[pingo]

$(".a1")).mouseover(function() {
   $(.b1).addClass('active').animate({ opacity: 1 }, 1000); 
                            });

при наведении моуса на ссылку меню, наверное, перелистнётся на нужый слайд и прозрачность плавно пропадёт, наверное.

ps жесть конечно, 4 заголовка h1, что думать боту об этой отдельно взятой страницы?

Comments

[Александр Донов]

выдача контента реализована на json-ах - поисковик их не увидит =)

Answer 2

[lega]

https://jsfiddle.net/lega911/feamu3up/

Comments

[Александр Донов]

В данном случае не подходит, но это ВЕЛИКОЛЕПНО!
Снимаю шляпу.