Vitaliy21,
Не наю, считаю не стоит делать анимацию часть на css - часть на JQ,
Посколь применение скрипта не избежать, а анимация разовая - лучше всё сделать одним модулем
Пример:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<script type="text/javascript" src="http://myforum2.4adm.ru/storage/myforum2_4adm_ru/images/jQuery.js"></script>
<script type="text/javascript" src="http://myforum2.4adm.ru/storage/myforum2_4adm_ru/images/jquery.cookie.js"></script>
<style type="text/css">
#CocieBlock1 {
text-align: center;
padding:12px;
margin:0 auto;
}
#CocieBlock1 *{
margin:0;
padding:0;
}
#CocieBlock1 .box {
padding:12px;
background-color:#C1C1C1;
}
#CocieBlock1 .close {
line-height:3px;
width:10px;
height:10px;
padding:5px 4px 4px 5px;
float:right;
margin-right:0px;
cursor:pointer;
}
#CocieBlock1 section{
font-size:17px;
font-weight:700;
padding:12px;
max-width:360px;
display:none;
}
.box{
width:500px;
font: normal normal 400 12px/18px Verdana;
}
.box section hr{
height:3px;
padding:0;
}
.tn-box-color-1 {
max-width:360px;
text-align: left;
position:relative;
background:#FEE791 url(http://s1.uploads.ru/i/MYmFD.png) 12px 50% no-repeat;
padding:20px 85px 22px 65px!important;
}
.tn-box-color-1 hr{
position:absolute;
width:90%;
margin-top:13px!important;
left:5%;
border:#FDFBFD solid 2px;
}
</style>
<script type="text/JavaScript">
$(document).ready(function (){
var box1 = $.cookie('box1')
if(box1 =='none'){
$('#CocieBlock1').remove();
}
$('#boxs1').click(function() {
$('#box1').slideUp(800, function() {
$('#CocieBlock1 section').slideDown(800,function() {
setTimeout("$('#CocieBlock1 section').fadeOut(2300)",1500) //.slideUp(2300)",1500)
});
});
//$.cookie('box1', 'none', { expires: 365}); //Временно закомментировал для тестов
});
});
</script>
</head>
<body>
<div id="CocieBlock1" class="container">
<div class="box" id="box1" >
<div class="close" id="boxs1">x</div>
При закрытии таблички должно появится уведомление как в примере!>> Но пока не получается сделать((
</div>
<section>
<div class="tn-box tn-box-color-1">
<p>Ваши персональные настройки были успешно сохранены!</p>
<hr>
<div class="tn-progress"></div>
</div>
</section>
</div>
</body>
</html>