Есть небольшой кусочек кода, с помощью которого идет появление/скрытие элемента при наведении на ссылку.
Чтобы не прописывать код отдельно для каждой ссылки (сейчас ссылок 8, хотя может быть много), решил организовать цикл, но из-за jquery, как я понял он работает некорректно, а именно всегда в событии переменные classEl='#elem-8' и classBut='#menu-but-8'.
В итоге, при наведении, вместо необходимых, отображается всегда последний элемент.
Подскажите что именно делаю не так?
Код скрипта:
<script type="text/javascript">
$(document).ready(function() {
for(i=1; i<=8; i++) {
var classEl;
classEl = '#elem-' + i;
var classBut;
classBut = '#menu-but-' + i;
$(classBut).hover(
function(){
$(classEl).stop(true, true).fadeIn(500);
$("#inner-block").stop(true, true).fadeOut(1000);
},
function(){
$(classEl).stop(true, true).fadeOut(1400);
$("#inner-block").stop(true, true).fadeIn(600);
}
);
}
});
</script>
Код ХТМЛ:
<div id="block-menu">
<div class="index-images">
<div style="background: url(img/img-1.gif)"></div>
<div style="background: url(img/img-2.gif)"></div>
<div style="background: url(img/img-3.gif)"></div>
<div style="background: url(img/img-4.gif)"></div>
<div style="background: url(img/img-5.gif)"></div>
<div style="background: url(img/img-6.gif)"></div>
<div style="background: url(img/img-7.gif)"></div>
<div style="background: url(img/img-8.gif)"></div>
</div>
<div id="inner-block"></div>
<a href="#" id="menu-but-1">бла бла бла</a>
<div id="elem-1"></div>
<a href="#" id="menu-but-2">бла бла бла</a>
<div id="elem-2"></div>
<a href="#" id="menu-but-3">бла бла бла</a>
<div id="elem-3"></div>
<a href="#" id="menu-but-4">бла бла бла</a>
<div id="elem-4"></div>
<a href="#" id="menu-but-5">бла бла бла</a>
<div id="elem-5"></div>
<a href="#" id="menu-but-6">бла бла бла</a>
<div id="elem-6"></div>
<a href="#" id="menu-but-7">бла бла бла</a>
<div id="elem-7"></div>
<a href="#" id="menu-but-8">бла бла бла</a>
<div id="elem-8"></div>
</div>
