Я создаю веб-сайт, где использую jQuery для анимации горизонтального меню с вкладками. То, чего я хочу достичь, можно увидеть здесь:
/ ссылка удалена /
Если навести курсор мыши на вкладку «Ссылка 1», вы увидите, что белый div расширяется. Каждый из пунктов меню вкладок представляет собой стилизованный li-тег. Я хочу, чтобы при наведении курсора мыши на вкладку «Ссылка 2» белый div сокращался, а затем снова расширялся с содержанием, связанным с «Ссылкой 2», а не с «Ссылкой 1». Кроме того, вкладка «Ссылка 1» должна быть развернута по умолчанию (то есть, когда вы только зашли на сайт)
Кто-нибудь из вас знает, как это сделать? То, что у меня сейчас есть, это:
<script type="text/javascript">
$(document).ready(function(){
var $div = $('#divtest');
var height = $div.height();
$div.hide().css({ height : 0 });
$('#forside').hover(function () {
if ($div.is(':visible')) {
$div.animate({ height: 0 }, { duration: 200, complete: function () {
$div.hide();
} });
} else {
$div.show().animate({ height : height }, { duration: 200 });
}
return false;
});
});
</script>
Нужно ли иметь 4 разных div, которые расширяются / сжимаются при каждом наведении мыши?
Если мне неясно, в чем заключается моя проблема, скажите, пожалуйста, и я постараюсь уточнить:)
Заранее спасибо!