Всем добрый день.
Пытаюсь сделать сабж, но дело то не очень идёт. На данный момент код имеет следующий вид(тестирую только в ФайрФоксе):
|
Код:
|
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
.mshache{
display: none;
-moz-animation-name: anumaciyoCollapse;
-moz-animation-duration: 2000ms;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: ease-in-out;
}
/*<!--Ключевые кадры анимации--> */
@-moz-keyframes anumaciyoAppear {
0%{
-moz-transform: scale(0.1,0.1);
-moz-opacity: 0;
}
100% {
-moz-transform: scale(1,1);
-moz-opacity: 1;
}
}
@-moz-keyframes anumaciyoCollapse {
0% {
-moz-transform: scale(1,1);
-moz-opacity: 1;
}
100%{
-moz-transform: scale(0.1,0.1);
-moz-opacity: 0;
}
}
a {
text-decoration:none;
color:#03508c;
font-weight:bold;
font-size:16px;
}
/*Стиль всплывающего окна */
#appear {
position: absolute;
width:320px;
left: 35%;
top: 100px;
border:solid #666688 2px;
display: none;
z-index: 100;
overflow: hidden;
border-radius: 7px;
background-color:#666699;
color:#fff;
text-align:center;
padding:10px;
/*-moz-animation-name: anumaciyoAppear;
-moz-animation-duration: 2000ms;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: ease-in-out;
*/
}
</style>
<meta http-equiv="Content-Type" content="text/html;charset=cp-1251">
<title>popa-p</title>
<link rel="stylesheet" href="style.css" type="text/css">
<script>
function showWin(){
document.getElementById('appear').style.display='block';
}
function collapseWin() {
var element = document.getElementById('appear');
element.className = "mshache";
}
</script>
</head>
<body>
<a href="#" onclick="showWin();" title=" Поднимите веки ">Открыть нечто</a>
<div id="appear" >
Моржевание моржевеющих моржуванов моржуйски моржает моржа.
<button type="button" onClick="collapseWin()" >X</button>
</div>
</body>
</html> |
Проблем несколько:
1.Если раскомменить код анимации плавного появления, перестаёт срабатывать плавное закрытие.
2.После плавного закрытия, блок снова появляется во всей красе и фнукция закрытия уже не срабатывает более.
Подскажите как отладить данную штуку. JS только осваиваю.