Пример:
Анимировать все отображаемые параграфы со скоростью slow, анимация выполняется со скорость в 600 миллисекунд.
"HTML"
<button>Hide 'em</button>Hiya
Such interesting text, eh?
"CSS"
p { background:#dad; font-weight:bold; }
"Живой пример 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").hide("slow");
});
});
</script>
</head>
<body class="iframe">
<button>Hide 'em</button>
Hiya
Such interesting text, eh?
</body>
</html>
<style>
p { background:#dad; font-weight:bold; }
</style>
Пример:
Анимировать все элементы span (слова в элементах), чтобы скрыть их, анимация выполняется со скоростью 200 миллисекунд. После того как анимация будет выполнена, анимация начинается заново.
"jQuery"
$("#hidr").click(function () {
$("span:last-child").hide("fast", function () {
// используйте callee чтобы не указывать имя функции
$(this).prev().hide("fast", arguments.callee);
});
});
$("#showr").click(function () {
$("span").show(2000);
});
"HTML"
<button id="hidr">Hide</button>
<button id="showr">Show</button>
<div>
<span>Once</span> <span>upon</span> <span>a</span>
<span>time</span> <span>there</span> <span>were</span>
<span>three</span> <span>programmers...</span>
</div>
"CSS"
span { background:#def3ca; padding:3px; float:left; }
"Живой пример 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(){
$("#hidr").click(function () {
$("span:last-child").hide("fast", function () {
// используйте callee чтобы не указывать имя функции
$(this).prev().hide("fast", arguments.callee);
});
});
$("#showr").click(function () {
$("span").show(2000);
});
});
</script>
</head>
<body class="iframe">
<button id="hidr">Hide</button>
<button id="showr">Show</button>
<div>
<span>Once</span> <span>upon</span> <span>a</span>
<span>time</span> <span>there</span> <span>were</span>
<span>three</span> <span>programmers...</span>
</div>
</body>
</html>
<style>
span { background:#def3ca; padding:3px; float:left; }
</style>
Пример:
Скрывать элементы div по щелчку в течение 2 секунд, затем удалить div элемент. Проверьте нажатие более чем по одному элементу во время выполнения функции.
"jQuery"
for (var i = 0; i < 5; i++) {
$("<div>").appendTo(document.body);
}
$("div").click(function () {
$(this).hide(2000, function () {
$(this).remove();
});
});
"HTML"
<div></div>
"CSS"
div { background:#ece0fb; width:30px;
height:40px; margin:2px; float:left; }
"Живой пример 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(){
for (var i = 0; i < 5; i++) {
$("<div>").appendTo(document.body);
}
$("div").click(function () {
$(this).hide(2000, function () {
$(this).remove();
});
});
});
</script>
</head>
<body class="iframe">
<div></div>
</body>
</html>
<style>
div { background:#ece0fb; width:30px;
height:40px; margin:2px; float:left; }
</style>