Сообщение от рони
|
hesrun,
Самовар ненужон, могет чайник сгодится ))
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
.plashka {
width:440px;
min-height:98px;
border:1px #ebebeb solid;
border-radius:10px;
overflow:hidden;
}
.mini {
background-color:#FFCC00;
}
.plashka h1 {
font-size:30px;
}
.plashka p {
margin-top:20px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script language="JavaScript" src="http://code.jquery.com/color/jquery.color-2.1.1.js" type="text/javascript"></script>
</head>
<body>
Кликни по блоку с текстом.
<div class="plashka mini">
<h1>Download this app</h1>
<p>Visite our facebook
Why? For the glory of SATANE of course!
Workers everywhere should have the right to safe and ethical working conditions. They should also have access to educational oppor Visite our facebook
Why? For the glory of SATANE of course!
Workers everywhere should have the right to safe and ethical working conditions. They should also have access to educational oppor Visite our facebook
Why? For the glory of SATANE of course!
Workers everywhere should have the right to safe and ethical working conditions. They should also have access to educational oppor</p>
</div>
<script>
$(function () {
var n = 0;
var h = $('.plashka').outerHeight()
$('.plashka').click(function () {
n ^= 1
n ? $(this).animate({
height: 98,
backgroundColor: '#CCFFFF'
}, 1000, function () {
$(this).toggleClass('mini')
}) : $(this).animate({
height: h,
backgroundColor: '#FFCC00'
}, 1000, function () {
$(this).toggleClass('mini')
})
})
})
</script>
</body>
</html>
|
Вот мне надо такую, только с перламутровыми пуговицами...
А точнее, с анимацией все четко, как и нужно было... Только стили должны подхватытваться из CSS, не прописывая их в скрипте... И изначально, он (див) должен быть уже маленького размера...