Пример:
Анимировать все скрытые параграфы, отобразив их с медленной анимацией, анимация продолжается в течении 600 миллисекунд.
"HTML"
<button>Show it</button> <p style="display: none">Hello</p>
"CSS"
p { background:yellow; }
"Живой пример 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(){
$("button").click(function () {
$("p").show("slow");
});
});
</script>
</head>
<body class="iframe">
<button>Show it</button>
<p style="display: none">Hello</p>
</body>
</html>
<style>
p { background:yellow; }
</style>
Пример:
Анимировать все скрытые элементы div, чтобы быстро их показать, в определенном порядке, анимация длится в течении 200 миллисекунд. Как только анимация выполнена, она снова повторяется для каждого объекта.
"jQuery"
$("#showr").click(function () {
$("div:eq(0)").show("fast", function () {
// используйте callee, чтоб не повторять имени функции
$(this).next().show("fast", arguments.callee);
});
});
$("#hidr").click(function () {
$("div").hide(2000);
});
"HTML"
<button id="showr">Show</button> <button id="hidr">Hide</button> <div>Hello,</div> <div>how</div> <div>are</div> <div>you?</div>
"CSS"
div { background:#def3ca; margin:3px; width:80px;
display:none; float:left; text-align:center; }
"Живой пример 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(){
$("#showr").click(function () {
$("div:eq(0)").show("fast", function () {
// используйте callee, чтоб не повторять имени функции
$(this).next().show("fast", arguments.callee);
});
});
$("#hidr").click(function () {
$("div").hide(2000);
});
});
</script>
</head>
<body class="iframe">
<button id="showr">Show</button>
<button id="hidr">Hide</button>
<div>Hello,</div>
<div>how</div>
<div>are</div>
<div>you?</div>
</body>
</html>
<style>
div { background:#def3ca; margin:3px; width:80px;
display:none; float:left; text-align:center; }
</style>
Пример:
Анимировать все элементы span и input чтобы сделать их видимыми со скоростью normal. Как только анимация будет показана, произойдёт отображение текста.
"jQuery"
function doIt() {
$("span,div").show("normal");
}
$("button").click(doIt); // можно передать название функции
$("form").submit(function () {
if ($("input").val() == "yes") {
$("p").show(4000, function () {
$(this).text("Ok, DONE! (now showing)");
});
}
$("span,div").hide("normal");
return false; // остановить отправку данных
});
"HTML"
<button>Do it!</button>
<span>Введите 'yes' и нажмите enter</span>
<div>
<form>
<input type="text" />
</form>
</div>
<p style="display:none;">I'm hidden...</p>
"CSS"
span { display:none; }
div { display:none; }
p { font-weight:bold; background-color:#fcd; }
"Живой пример 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(){
function doIt() {
$("span,div").show("normal");
}
$("button").click(doIt); // можно передать название функции
$("form").submit(function () {
if ($("input").val() == "yes") {
$("p").show(4000, function () {
$(this).text("Ok, DONE! (now showing)");
});
}
$("span,div").hide("normal");
return false; // остановить отправку данных
});
});
</script>
</head>
<body class="iframe">
<button>Do it!</button>
<span>Введите 'yes' и нажмите enter</span>
<div>
<form>
<input type="text" />
</form>
</div>
<p style="display:none;">I'm hidden...</p>
</body>
</html>
<style>
span { display:none; }
div { display:none; }
p { font-weight:bold; background-color:#fcd; }
</style>