Практическая часть. Пример: необходимо применить эффект гармошки для выпадающего меню

Пример: необходимо применить эффект гармошки для выпадающего меню

<script type="text/javascript">

var s1;

var s2;

var s3;

var s4;

var s5;

function clearT()

{

clearInterval(s1);

clearInterval(s2);

clearInterval(s3);

clearInterval(s4);

clearInterval(s5);

$("img").css("visibility","hidden");

setTimeout(function() {$(".arrow").css("visibility","hidden")},400);

}

 

function showT()

{

 

}

 

function openP(t)

{

if(t==0)

{

clearT();

 

$("a2").css("visibility","visible");

s2 = setInterval(function(){setTimeout(function(){$("#a2").css("visibility","hidden");},200); setTimeout(function(){$("#a2").css("visibility","visible");},400);},500);

 

$("a4").css("visibility","visible");

s4 = setInterval(function(){setTimeout(function(){$("#a4").css("visibility","hidden");},200); setTimeout(function(){$("#a4").css("visibility","visible");},400);},500);

 

setTimeout(function(){$("#21").css("visibility","visible");},1000);

setTimeout(function(){$("#22").css("visibility","visible");},2000);

setTimeout(function(){$("#23").css("visibility","visible");},3000);

setTimeout(function(){$("#24").css("visibility","visible");},4000);

setTimeout(function(){$("#41").css("visibility","visible");},1000);

setTimeout(function(){$("#42").css("visibility","visible");},2000);

setTimeout(function(){$("#43").css("visibility","visible");},3000);

setTimeout(function(){$("#44").css("visibility","visible");},4000);

}

if(t==1)

{

clearT();

 

$("a1").css("visibility","visible");

s1 = setInterval(function(){setTimeout(function(){$("#a1").css("visibility","hidden");},200); setTimeout(function(){$("#a1").css("visibility","visible");},400);},500);

 

$("a3").css("visibility","visible");

s3 = setInterval(function(){setTimeout(function(){$("#a3").css("visibility","hidden");},200); setTimeout(function(){$("#a3").css("visibility","visible");},400);},500);

 

$("a5").css("visibility","visible");

s5 = setInterval(function(){setTimeout(function(){$("#a5").css("visibility","hidden");},200); setTimeout(function(){$("#a5").css("visibility","visible");},400);},500);

 

setTimeout(function(){$("#11").css("visibility","visible");},1000);

setTimeout(function(){$("#12").css("visibility","visible");},2000);

setTimeout(function(){$("#13").css("visibility","visible");},3000);

setTimeout(function(){$("#14").css("visibility","visible");},4000);

 

setTimeout(function(){$("#31").css("visibility","visible");},1000);

setTimeout(function(){$("#32").css("visibility","visible");},2000);

setTimeout(function(){$("#33").css("visibility","visible");},3000);

setTimeout(function(){$("#34").css("visibility","visible");},4000);

 

setTimeout(function(){$("#51").css("visibility","visible");},1000);

setTimeout(function(){$("#52").css("visibility","visible");},2000);

setTimeout(function(){$("#53").css("visibility","visible");},3000);

setTimeout(function(){$("#54").css("visibility","visible");},4000);

}

if(t==2)

{

clearT();

 

$("a1").css("visibility","visible");

s1 = setInterval(function(){setTimeout(function(){$("#a1").css("visibility","hidden");},200); setTimeout(function(){$("#a1").css("visibility","visible");},400);},500);

 

$("a2").css("visibility","visible");

s2 = setInterval(function(){setTimeout(function(){$("#a2").css("visibility","hidden");},200); setTimeout(function(){$("#a2").css("visibility","visible");},400);},500);

 

 

setTimeout(function(){$("#11").css("visibility","visible");},1000);

setTimeout(function(){$("#12").css("visibility","visible");},2000);

setTimeout(function(){$("#13").css("visibility","visible");},3000);

setTimeout(function(){$("#14").css("visibility","visible");},4000);

 

setTimeout(function(){$("#21").css("visibility","visible");},1000);

setTimeout(function(){$("#22").css("visibility","visible");},2000);

setTimeout(function(){$("#23").css("visibility","visible");},3000);

setTimeout(function(){$("#24").css("visibility","visible");},4000);

}

if(t==3)

{

clearT();

 

$("a4").css("visibility","visible");

s4 = setInterval(function(){setTimeout(function(){$("#a4").css("visibility","hidden");},200); setTimeout(function(){$("#a4").css("visibility","visible");},400);},500);

 

$("a5").css("visibility","visible");

s5 = setInterval(function(){setTimeout(function(){$("#a5").css("visibility","hidden");},200); setTimeout(function(){$("#a5").css("visibility","visible");},400);},500);

 

 

setTimeout(function(){$("#41").css("visibility","visible");},1000);

setTimeout(function(){$("#42").css("visibility","visible");},2000);

setTimeout(function(){$("#43").css("visibility","visible");},3000);

setTimeout(function(){$("#44").css("visibility","visible");},4000);

 

setTimeout(function(){$("#51").css("visibility","visible");},1000);

setTimeout(function(){$("#52").css("visibility","visible");},2000);

setTimeout(function(){$("#53").css("visibility","visible");},3000);

setTimeout(function(){$("#54").css("visibility","visible");},4000);

}

}

</script>

<style>

.arrow{height:90px; width:90px;}

.im{height:90px; width:90px;}

table{empty-cells:show; border: 2px dotted blue}

tr{width:300px;}

td{width:90px; height:90px; border: 1px dashed blue}

img{visibility:hidden;}

</style>

</head>

<body>

<table border="1px">

<tr>

<td>

<img id="a1" class="arrow" src="arrow.jpg"/>

</td>

<td>

<img id="11" class="im" src="1.jpg"/>

</td>

<td>

<img id="12" class="im" src="2.jpg"/>

</td>

<td>

<img id="13" class="im" src="3.jpg"/>

</td>

<td>

<img id="14" class="im" src="4.jpg"/>

</td>

</tr>

<tr>

<td>

<img id="a2" class="arrow" src="arrow.jpg"/>

</td>

<td>

<img id="21" class="im" src="1.jpg"/>

</td>

<td>

<img id="22" class="im" src="2.jpg"/>

</td>

<td>

<img id="23" class="im" src="3.jpg"/>

</td>

<td>

<img id="24" class="im" src="4.jpg"/>

</td>

</tr>

<tr>

<td>

<img id="a3" class="arrow" src="arrow.jpg"/>

</td>

<td>

<img id="31" class="im" src="1.jpg"/>

</td>

<td>

<img id="32" class="im" src="2.jpg"/>

</td>

<td>

<img id="33" class="im" src="3.jpg"/>

</td>

<td>

<img id="34" class="im" src="4.jpg"/>

</td>

 

</tr>

<tr>

<td>

<img id="a4" class="arrow" src="arrow.jpg"/>

</td>

<td>

<img id="41" class="im" src="1.jpg"/>

</td>

<td>

<img id="42" class="im" src="2.jpg"/>

</td>

<td>

<img id="43" class="im" src="3.jpg"/>

</td>

<td>

<img id="44" class="im" src="4.jpg"/>

</td>

</tr>

<tr>

<td>

<img id="a5" class="arrow" src="arrow.jpg"/>

</td>

<td>

<img id="51" class="im" src="1.jpg"/>

</td>

<td>

<img id="52" class="im" src="2.jpg"/>

</td>

<td>

<img id="53" class="im" src="3.jpg"/>

</td>

<td>

<img id="54" class="im" src="4.jpg"/>

</td>

</tr>

</table>

<br>

<select name="num" size="4">

<option value="0" ondblclick="openP(0)"> Четные

<option value="1" selected ondblclick="openP(1)"> Нечетные

<option value="2" ondblclick="openP(2)"> До 3

<option value="3" ondblclick="openP(3)"> После 3

</select>

<br><br>

<form action="part2.html">

<input type="submit" value="Показать Слайд-Шоу" onclick="showT()" />

</form>

 

<input type="button" value="Очистить таблицу" onclick="clearT()" />

</body>

</html>

Экранные формы:

Рис. 1 – Первая страница

Рис. 2 – Вторая страница