hide() - скрыть,
show() - показать,
toggle() - показать, если скрыты и скрыть, если видимы.
Пример:
Html-код:
<html>
<head>
<title>jQuery эффекты</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="les8_ex1"></div>
<input type="button" value="Скрыть" onclick="hideDiv();">
<input type="button" value="Показать" onclick="showDiv();">
</body>
</html>
Код функций (на странице script.js):
function hideDiv(){
$('#les8_ex1').hide();
}
function showDiv(){
$('#les8_ex1').show();
}
Ну и стили на style.css в принципе на ваше усмотрение:
#les8_ex1{
width:400px;
height:100px;
background:#666699;
border:1px solid #333366;
margin-bottom:20px;
}
Страница style.css здесь приведена не случайно. Все дело в том, что скрыть элемент можно и при помощи таблицы стилей,
а не методом hide().
Например, если бы мы хотели, чтобы при загрузке страницы наш div был скрыт, то мы могли бы это сделать двумя способами:
Первый, использовать метод hide():
$(document).ready(init);
function init(){
$('#les8_ex1').hide();
}
function hideDiv(){
$('#les8_ex1').hide();
}
function showDiv(){
$('#les8_ex1').show();
}
А второй - использовать свойство display CSS:
#les8_ex1{
width:400px;
height:100px;
background:#666699;
border:1px solid #333366;
margin-bottom:20px;
display:none;
}
Результат будет одинаков.
Эти же методы гораздо интереснее использовать с анимацией:
hide(speed, callback) - скрыть,
show(speed, callback) - показать,
toggle(speed, callback) - переключить (показать, если скрыты и наоборот), где:
speed - скорость изменения высоты, ширины или свойства opacity (прозрачность) элемента. Может принимать три значения: slow (медленно), normal (нормально) или fast (быстро), а также значение в миллисекундах.
callback - функция, которая будет выполняться после завершения анимации. Ее присутствие вовсе необязательно.
Посмотрим тот же пример, только скрывать и отображать div будем медленно (сравните с первым примером) и, используя метод toggle().
Итак, html-код:
<html>
<head>
<title>jQuery эффекты</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="les8_ex2"></div>
<input type="button" id="but1" value="Скрыть/Отобразить" onclick="hideShowDiv();">
</body>
</html>
Код функции:
function hideShowDiv(){
$('#les8_ex2').toggle('slow');
}
slideUp() - свернуть,
slideDown() - развернуть,
toggle() - развернуть, если скрыт и свернуть, если видим.
Пример:
Html-код:
<html>
<head>
<title>jQuery эффекты</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="les8_ex3"></div>
<input type="button" value="Свернуть" onclick="slideUpDiv();">
<input type="button" value="Развернуть" onclick="slideDownDiv();">
</body>
</html>
Код функций (на странице script.js):
function slideUpDiv(){
$('#les8_ex3').slideUp();
}
function slideDownDiv(){
$('#les8_ex3').slideDown();
}
Стили на style.css:
#les8_ex3{
width:100px;
height:200px;
background:#666699;
border:1px solid #333366;
margin-bottom:20px;
}
Эти методы также можно использовать с анимацией:
slideUp(speed, callback) - свернуть,
slideDown(speed, callback) - развернуть,
slideToggle(speed, callback) - переключить (развернуть, если скрыты и наоборот), где:
speed - скорость изменения высоты элемента. Может принимать три значения: slow (медленно), normal (нормально) или fast (быстро), а также значение в миллисекундах.
callback - функция, которая будет выполняться после завершения анимации. Ее присутствие необязательно.
Посмотрим тот же пример, только скрывать и отображать div будем за 7 секунд и, используя метод toggle().
Html-код:
<html>
<head>
<title>jQuery эффекты</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="les8_ex4"></div>
<input type="button" value="Свернуть/Развернуть" onclick="slideToggleDiv();">
</body>
</html>
Код функций (на странице script.js):
function slideToggleDiv(){
$('#les8_ex4').slideToggle(7000);
}
fadeOut(speed, callback) - уменьшает свойство opacity (прозрачность),
fadeIn(speed, callback) - увеличивает свойство opacity (прозрачность), где:
speed - скорость изменения прозрачности элемента. Может принимать три значения: slow (медленно), normal (нормально) или fast (быстро), а также значение в миллисекундах.
opacity - значение прозрачности, до которого оно будет уменьшено (число от 0 до 1).
callback - функция, которая будет выполняться после завершения анимации. Ее присутствие необязательно.
Например:
Html-код:
<html>
<head>
<title>jQuery эффекты</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="les8_ex5"></div>
<input type="button" value="Исчезает (fadeOut)" onclick="fadeOutDiv();">
<input type="button" value="Появляется (fadeIn)" onclick="fadeInDiv();">
<div id="les8_ex6"></div>
<input type="button" value="Бледнеет (fadeTo)" onclick="fadeToDiv();">
</body>
</html>
Код функций (на странице script.js):
function fadeOutDiv(){
$('#les8_ex5').fadeOut(5000);
}
function fadeInDiv(){
$('#les8_ex5').fadeIn(5000);
}
function fadeToDiv(){
$('#les8_ex6').fadeTo(5000, 0.5);
}
Комментировать здесь нечего.
params - атрибуты css, которые хотим анимировать ("width", "top", "border"...).
options - свойства анимации (в том числе скорость).
stop() - останавливает анимацию.
Например:
Html-код:
<html>
<head>
<title>jQuery эффекты</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="les8_ex7"></div><div id="les8_ex8"></div>
<input type="button" value="Запустить анимацию" onclick="animateDiv();">
<input type="button" value="Остановить анимацию" onclick="stopDiv();">
</body>
</html>
Стили (на странице style.css):
#les8_ex7{
width:100px;
height:100px;
background:#666699;
}
#les8_ex8{
width:400px;
height:200px;
background:#666699;
}
Код функций (на странице script.js):
function animateDiv(){
$('#les8_ex7').animate({
width:"400px",
height:"200px"
}, 3000 );
$('#les8_ex8').animate({
width:"100px",
height:"100px"
}, 3000 );
}
function stopDiv(){
$('#les8_ex7').stop();
$('#les8_ex8').stop();
}
Несколько нюансов:
- свойства должны быть обозначены без пробелов, последующее слово с большой буквы, т.е. "borderWidth" вместо "border-width",
- поддерживаются только те свойства, значения которых выражаются числами.
- также в качестве значений свойств могут быть использованы значения "hide", "show" и "toggle".
Например, следующая функция:
function animateDiv(){
$('#les8_ex8').animate({
"height": "toggle"
}, 1000 );
}
будет при каждом обращении менять высоту от 0 до заданной в стилях и обратно:
На сегодня, наверно, хватит. В следующий раз мы продолжим изучать эффекты, а пока поиграйте с теми, которые мы уже узнали.
Предыдущий урок Вернуться в раздел Следующий урок
Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.
Как создать свой сайт → Уроки jQuery → Урок 8. Визуальные эффекты
jQuery - Урок 8. Визуальные эффекты
Методы видимости - hide(), show() и toggle()
Эти методы отвечают за видимость элементов, работают по принципу скрыть - показать:hide() - скрыть,
show() - показать,
toggle() - показать, если скрыты и скрыть, если видимы.
Пример:
Html-код:
Например, если бы мы хотели, чтобы при загрузке страницы наш div был скрыт, то мы могли бы это сделать двумя способами:
Первый, использовать метод hide():
А второй - использовать свойство display CSS:
Эти же методы гораздо интереснее использовать с анимацией:
hide(speed, callback) - скрыть,
show(speed, callback) - показать,
toggle(speed, callback) - переключить (показать, если скрыты и наоборот), где:
speed - скорость изменения высоты, ширины или свойства opacity (прозрачность) элемента. Может принимать три значения: slow (медленно), normal (нормально) или fast (быстро), а также значение в миллисекундах.
callback - функция, которая будет выполняться после завершения анимации. Ее присутствие вовсе необязательно.
Посмотрим тот же пример, только скрывать и отображать div будем медленно (сравните с первым примером) и, используя метод toggle().
Итак, html-код:
Методы свертывания - slideDown(), slideUp() и slideToggle()
Эти методы также отвечают за видимость элементов, но работают по принципу свернуть элемент плавно снизу-вверх - развернуть элемент плавно свеху-вниз:slideUp() - свернуть,
slideDown() - развернуть,
toggle() - развернуть, если скрыт и свернуть, если видим.
Пример:
Html-код:
slideUp(speed, callback) - свернуть,
slideDown(speed, callback) - развернуть,
slideToggle(speed, callback) - переключить (развернуть, если скрыты и наоборот), где:
speed - скорость изменения высоты элемента. Может принимать три значения: slow (медленно), normal (нормально) или fast (быстро), а также значение в миллисекундах.
callback - функция, которая будет выполняться после завершения анимации. Ее присутствие необязательно.
Посмотрим тот же пример, только скрывать и отображать div будем за 7 секунд и, используя метод toggle().
Html-код:
Методы исчезновения - fadeTo(), fadeOut() и fadeIn()
fadeTo(speed, opacity, callback) - уменьшает свойство opacity (прозрачность) к заданному значению,fadeOut(speed, callback) - уменьшает свойство opacity (прозрачность),
fadeIn(speed, callback) - увеличивает свойство opacity (прозрачность), где:
speed - скорость изменения прозрачности элемента. Может принимать три значения: slow (медленно), normal (нормально) или fast (быстро), а также значение в миллисекундах.
opacity - значение прозрачности, до которого оно будет уменьшено (число от 0 до 1).
callback - функция, которая будет выполняться после завершения анимации. Ее присутствие необязательно.
Например:
Html-код:
Методы анимации - animate() и stop()
animate(params, options) - анимирует стилевые свойства, где:params - атрибуты css, которые хотим анимировать ("width", "top", "border"...).
options - свойства анимации (в том числе скорость).
stop() - останавливает анимацию.
Например:
Html-код:
- свойства должны быть обозначены без пробелов, последующее слово с большой буквы, т.е. "borderWidth" вместо "border-width",
- поддерживаются только те свойства, значения которых выражаются числами.
- также в качестве значений свойств могут быть использованы значения "hide", "show" и "toggle".
Например, следующая функция:
На сегодня, наверно, хватит. В следующий раз мы продолжим изучать эффекты, а пока поиграйте с теми, которые мы уже узнали.
Предыдущий урок Вернуться в раздел Следующий урок
Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.