Пример:
Анимировать прозрачность (css свойство opacity) всех элементов div, анимация занимает 600 мс.
"HTML"
<span>Click here...</span> <div id="one"></div> <div id="two"></div> <div id="three"></div>
"CSS"
div { margin:3px; width:80px; display:none;
height:80px; float:left; }
div#one { background:#f00; }
div#two { background:#0f0; }
div#three { background:#00f; }
"Живой пример jQuery"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="http://slyweb.ru/css/jqueryiframe.css"
rel="stylesheet" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(document.body).click(function () {
$("div:hidden:first").fadeIn("slow");
});
});
</script>
</head>
<body class="iframe">
<p>
<span>Click here...</span>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
</body>
</html>
<style>
div { margin:3px; width:80px; display:none;
height:80px; float:left; }
div#one { background:#f00; }
div#two { background:#0f0; }
div#three { background:#00f; }
</style>
Пример:
Сделать непрозрачным красный блок по верх некоторый текста. Как только анимация выполнена, появляется дополнительлный текст поверх красного блока.
"jQuery"
$("a").click(function () {
$("div").fadeIn(3000, function () {
$("span").fadeIn(100);
});
return false;
});
"HTML"
<p>
Let it be known that the party of the first part
and the party of the second part are henceforth
and hereto directed to assess the allegations
for factual correctness... (click!)
<div><span>CENSORED!</span></div>
"CSS"
p { position:relative; width:400px; height:90px; }
div { position:absolute; width:400px; height:65px;
font-size:36px; text-align:center;
color:yellow; background:red;
padding-top:25px;
top:0; left:0; display:none; }
span { display:none; }
"Живой пример jQuery"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="http://slyweb.ru/css/jqueryiframe.css"
rel="stylesheet" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("a").click(function () {
$("div").fadeIn(3000, function () {
$("span").fadeIn(100);
});
return false;
});
});
</script>
</head>
<body class="iframe">
Let it be known that the party of the first part
and the party of the second part are henceforth
and hereto directed to assess the allegations
for factual correctness... (click!)
<div><span>CENSORED!</span></div>
</body>
</html>
<style>
p { position:relative; width:400px; height:90px; }
div { position:absolute; width:400px; height:65px;
font-size:36px; text-align:center;
color:yellow; background:red;
padding-top:25px;
top:0; left:0; display:none; }
span { display:none; }
</style>