jQuery, визуальные эффекты • Вэб-шпаргалка для интернет предпринимателей!

Содержание

Методы видимости — hide(), show() и toggle()
Методы свертывания — slideDown(), slideUp() и slideToggle()
Рекомендуем к прочтению

Методы видимости — 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="99%";
    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="99%";
    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="99%";
    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="99%";
    height:200px;
        background: url(image/coloboc.png);
    border:1px solid #333377;
    margin-bottom:20px;
    display:none;
}

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

1 2 3 4 5 6