Пример:
Анимировать все параграфы с использованием «скользящего вверх или вниз метода», анимация выполняется в течение 600 мс.
"jQuery"
$("button").click(function () {
$("p").slideToggle("slow");
});
"HTML"
<button>Toggle</button>This is the paragraph to end all paragraphs. You should feel <em>lucky</em> to have seen such a paragraph in your life. Congratulations!
"CSS"
p { width:400px; }
"Живой пример 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").slideToggle("slow");
});
});
</script>
</head>
<body class="iframe">
<button>Toggle</button>
This is the paragraph to end all paragraphs. You
should feel <em>lucky</em> to have seen such a paragraph in
your life. Congratulations!
</body>
</html>
<style>
p { width:400px; }
</style>
Пример:
Анимировать элементы div между разделителями с использованием функции toggle, которая показывает и скрывает их.
"jQuery"
$("#aa").click(function () {
$("div:not(.still)").slideToggle("slow", function () {
var n = parseInt($("span").text(), 10);
$("span").text(n + 1);
});
});
"HTML"
<button id =aa>Toggle</button> There have been <span>0</span> toggled divs. <div></div><div class="still"></div> <div style="display:none;"></div><div class="still"></div> <div></div><div class="still"></div> <div class="hider"></div><div class="still"></div> <div class="hider"></div><div class="still"></div> <div></div>
"CSS"
div { background:#b977d1; margin:3px; width:60px;
height:60px; float:left; }
div.still { background:#345; width:5px; }
div.hider { display:none; }
span { color:red; }
"Живой пример 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(){
$("#aa").click(function () {
$("div:not(.still)").slideToggle("slow", function () {
var n = parseInt($("span").text(), 10);
$("span").text(n + 1);
});
});
});
</script>
</head>
<body class="iframe">
<button id =aa>Toggle</button> There have been <span>0</span> toggled divs.
<div></div><div class="still"></div>
<div style="display:none;"></div><div class="still"></div>
<div></div><div class="still"></div>
<div class="hider"></div><div class="still"></div>
<div class="hider"></div><div class="still"></div>
<div></div>
</body>
</html>
<style>
div { background:#b977d1; margin:3px; width:60px;
height:60px; float:left; }
div.still { background:#345; width:5px; }
div.hider { display:none; }
span { color:red; }
</style>