<li>
<p id="zagolovok"> Zagolovok </p>
<div id="podmenu">
<a id="punkt1">1</a>
<a id="punkt2>2</a>
<a id="punkt3>3</a>
<a id="punkt4>4</a>
</div>
</li>
Пытался сделать с помощью hover() и fadeIn():
$('#zagolovok').hover(function() {
$('#punkt1').fadeIn (function() {
$('#punkt2').fadeIn (function() {
$('#punkt3').fadeIn (function() {
$('#punkt4').fadeIn ()
});
});
});
},
function() {
$('#punkt4').fadeOut (function() {
$('#punkt3').fadeOut (function() {
$('#punkt2').fadeOut (function() {
$('#punkt1').fadeOut ()
});
});
Но во-первых при таком способе, правильно "работают" только два последних пункта, а во-вторых уж очень длинным получается код. Подскажите пожалуйста, как можно здесь поступить?
Спустя 10 минут, 19 секунд (2.02.2011 - 22:44) nugle написал(а):
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#zagolovok').hover(function(){
$('#podmenu').fadeIn(2000);
});
});
</script>
<li>
<p id="zagolovok"> Zagolovok </p>
<div id="podmenu" style="display:none;>
<a id="punkt1">1</a>
<a id="punkt2">2</a>
<a id="punkt3">3</a>
<a id="punkt4">4</a>
</div>
</li>
Щас доработаю
Спустя 2 минуты, 53 секунды (2.02.2011 - 22:47) nugle написал(а):
Ой всё норм работает
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#zagolovok').mouseover(function(){
$('#podmenu').fadeIn(200);
});
$('#zagolovok').mouseout(function(){
$('#podmenu').fadeOut(200);
});
});
</script>
<li>
<p id="zagolovok"> Zagolovok </p>
<div id="podmenu" style="display:none;>
<a id="punkt1">1</a><br>
<a id="punkt2">2</a><br>
<a id="punkt3">3</a><br>
<a id="punkt4">4</a><br>
</div>
</li>
Спустя 22 минуты, 43 секунды (2.02.2011 - 23:10) l@pteff написал(а):
nugle, это действительно отлично работает, но подменю при таком варианте появляется и исчезает целиком, а сделать нужно чуть сложнее: навели указатель на заголовок-появился #punkt1, через скажем 0,2 сек. ниже появился #punkt2, через 0,2 сек-#punkt3 ниже и.т.д... получается эффект этакого ниспадающего меню. Убрали мышь-с такой же периодичностью пункты меню должны исчезать но только снизу вверх. Как следует подправить код для этого?
Спустя 8 минут, 6 секунд (2.02.2011 - 23:18) nugle написал(а):
тогда так сделайте и будет эффект
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#zagolovok').mouseover(function(){
$('#podmenu').show(2000);
});
$('#zagolovok').mouseout(function(){
$('#podmenu').hide(1000);
});
});
</script>
<li>
<p id="zagolovok"> Zagolovok </p>
<div id="podmenu" style="display:none;>
<a id="punkt1">1</a><br>
<a id="punkt2">2</a><br>
<a id="punkt3">3</a><br>
<a id="punkt4">4</a><br>
</div>
</li>
Спустя 39 минут, 8 секунд (2.02.2011 - 23:57) l@pteff написал(а):
Получилось решить с помощью slideDown()/slideUp(), Всё оказалось очень элементарно :)
Огромное спасибо за помощь!
$(function() {
$('#zagolovok').mouseover(function(){
$('#podmenu').slideDown(2000);
});
$('#zagolovok').mouseout(function(){
$('#podmenu').slideUp(1000);
});
});
</script>
Огромное спасибо за помощь!