Уроки:


  
HTML
  
  
CSS
  
  
PHP
  
  
JavaScript
  
  
jQuery
  
  
PHP+MySQL
  
  
Ajax
  

  Разделы:


  В помощь:


  Ещё:



  Авторизация:


  логин:   
  пароль: 
Программисты на работе общаются двумя фразами: "непонятно" и "вроде работает".

  Тренажер интуиции:


Тренажер интуиции


  Видеокурсы:


Бесплатный видеокурс: "Cайт-визитка за 1 день"

видеокурс: Сайт-визитка за один день



  Опрос:



  Топ комментаторов:


40

— Алло! Служба поддержки? Вы не знаете, почему у меня изображение на мониторе дрожжит, когда я грызу сухари?

  Моя группа в контакте:



jQuery, визуальные эффекты

Методы видимости - hide(), show() и toggle()

Эти методы отвечают за видимость элементов, работают по принципу скрыть - показать:

hide() - скрыть

show() - показать

toggle() - показать, если скрыты и скрыть, если видимы.

Пример:

Эффекты jQuery

Html-код:

<html>
  <head>
    <title>jQuery</title>
    <link rel="stylesheet" type="text/css" href="cascade.css">
 <script type="text/javascript" src="jquery-1.7.1.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();
}

Ну и стили на cascade.css в принципе на ваше усмотрение:

#les8_ex1{
    width:300px;
    height:200px;
 	background: url(image/coloboc.png);
    border:1px solid #333377;
    margin-bottom:20px;
}

Страница cascade.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:300px;
    height:200px;
	background: url(image/coloboc.png);
    border:1px solid #333377;
    margin-bottom:20px;
    display:none;
}

Результат будет одинаков.

Эти же методы гораздо интереснее использовать с анимацией:

hide(speed, callback) - скрыть,

show(speed, callback) - показать,

toggle(speed, callback) - переключить (показать, если скрыты и наоборот), где:

speed - скорость изменения высоты, ширины или свойства opacity (прозрачность) элемента. Может принимать три значения: slow (медленно), normal (нормально) или fast (быстро), а также значение в миллисекундах.

callback - функция, которая будет выполняться после завершения анимации. Ее присутствие вовсе необязательно.

Посмотрим тот же пример, только скрывать и отображать div будем медленно (сравните с первым примером) и, используя метод toggle().

Эффекты jQuery

Итак, html-код:

<html>
  <head>
    <title>jQuery</title>
    <link rel="stylesheet" type="text/css" href="cascade.css">
 <script type="text/javascript" src="jquery-1.7.1.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');
}

Код cascade.css:

#les8_ex2{
    width:300px;
    height:200px;
	background: url(image/coloboc.png);
    border:1px solid #333377;
    margin-bottom:20px;
    display:none;
}

Методы свертывания - slideDown(), slideUp() и slideToggle()

Эти методы также отвечают за видимость элементов, но работают по принципу свернуть элемент плавно снизу-вверх - развернуть элемент плавно свеху-вниз:

slideUp()- свернуть,

slideDown()- развернуть,

toggle() - развернуть, если скрыт и свернуть, если видим.

Эти методы также можно использовать с анимацией:

slideUp(speed, callback) - свернуть

slideDown(speed, callback) - развернуть

slideToggle(speed, callback) - переключить (развернуть, если скрыты и наоборот), где:

speed - скорость изменения высоты элемента. Может принимать три значения: slow (медленно), normal (нормально) или fast (быстро), а также значение в миллисекундах.

callback - функция, которая будет выполняться после завершения анимации. Ее присутствие необязательно.

Посмотрим тот же пример, только скрывать и отображать div будем за 4 секунд и, используя метод toggle().

Эффекты jQuery

Html-код:

<html>
  <head>
    <title>jQuery</title>
    <link rel="stylesheet" type="text/css" href="cascade.css">
  <script type="text/javascript" src="jquery-1.7.1.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(4000);
}

Код функций (на странице cascade.css):

#les8_ex4{
    width:300px;
    height:200px;
	background: url(image/coloboc.png);
    border:1px solid #333377;
    margin-bottom:20px;
    display:none;
}

На этом мы закончим наше знакомство с jquery. Если вам были полезны данные уроки, подпишитесь на обновление, и вы не пропустите новые полезные материалы.

1 2 3 4 5 6

Проверьте свою интуицию:


Мобильную версию можно скачать в google play

Комментарии


Нет комментариев. Вы можете стать первым !

Ваш комментарий



Почта: info@web-shpargalka.ru
Сообщить друзьям:
Главная | Форум | Отзывы | Обо мне | Мои курсы | Работы учеников | Конкурсы | Обратная связь