Показать сообщение отдельно
  #4 (permalink)  
Старый 29.06.2014, 13:04
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

gemma, на всякий случай c версии 1.7 toggle это совсем иная функция
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<style type="text/css">
.container {
	width:200px;
	height:300px;
	overflow:hidden;
	position:relative;
	background:#003;
	float:left;
	margin:10px;
}

.container:hover .bottompanel {
	bottom:0;
}

.bottompanel {
	width:200px;
	height:25px;
	background:rgba(255, 255, 255, 0.7);
	font-weight:bold;
	font-size:9px;
	text-align:center;
	position:absolute;
	bottom:-25px;
	padding:0;
}

.bpactive {
	bottom:0;
}

.shareinscr{
	color:black;
	display:inline-block;
	padding:7px;
	margin:0 5px;
	cursor:default;
	font-family:Arial, Helvetica, sans-serif;
}

.siactive {
	color: #900;
}
</style>

<script type="text/javascript">
	$(document).ready(function(){
		$('.shareinscr').toggle(
			function(e){
				$(this).addClass("siactive");
				$(this).parent(".bottompanel").addClass("bpactive");
			},
			function(e){
			    var el = $(this);
				el.removeClass("siactive");
                window.setTimeout(function ()
{
   el.parent(".bottompanel").removeClass("bpactive")
}, 1000)
				;
			}
		);
	});
</script>
</head>
<body>
<div class="container"><div class="bottompanel"><div class="shareinscr">ЗАФИКСИРОВАТЬ ПАНЕЛЬ</div></div></div>
<div class="container"><div class="bottompanel"><div class="shareinscr">ЗАФИКСИРОВАТЬ ПАНЕЛЬ</div></div></div>
<div class="container"><div class="bottompanel"><div class="shareinscr">ЗАФИКСИРОВАТЬ ПАНЕЛЬ</div></div></div>
</body>
</html>
Ответить с цитированием