index.html
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>JQ</title>
</head>
<body>
<div style="border: 1px solid red;" id="test">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
<input type="submit" onclick="hide()" value="Скрыть"/>
<input type="submit" onclick="show()" value="Показать"/>
<script src="jquery-3.2.1.js"></script>
<script>
// Анимация: скрываем и показываем элемент.
/*
function hide() {
$('#test').hide(1000);
}
function show() {
$('#test').show(1000);
}
*/
/*
function hide() {
$('#test').slideUp(1000);
}
function show() {
$('#test').slideDown(1000);
}
*/
/*
function hide() {
$('#test').fadeOut(1000);
}
function show() {
$('#test').fadeIn(1000);
}
*/
// slideToggle скрывает и показывает элемент.
function hide() {
$('#test').slideToggle(1000);
}
</script>
</body>
</html>
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>JQ</title>
</head>
<body>
<div style="border: 1px solid red;" id="test">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
<input type="submit" onclick="hide()" value="Скрыть"/>
<input type="submit" onclick="show()" value="Показать"/>
<script src="jquery-3.2.1.js"></script>
<script>
// Анимация: скрываем и показываем элемент.
/*
function hide() {
$('#test').hide(1000);
}
function show() {
$('#test').show(1000);
}
*/
/*
function hide() {
$('#test').slideUp(1000);
}
function show() {
$('#test').slideDown(1000);
}
*/
/*
function hide() {
$('#test').fadeOut(1000);
}
function show() {
$('#test').fadeIn(1000);
}
*/
// slideToggle скрывает и показывает элемент.
function hide() {
$('#test').slideToggle(1000);
}
</script>
</body>
</html>
Комментариев нет:
Отправить комментарий