M

E

N

U

 

 

эффекты

базовые
hide()  show() hide() — скрывает элемент
show() — показывает элемент
toggle() скрывает/показывает элемент
затухания
fadeIn()  fadeOut() fadeIn() — увеличивает свойство opacity, элемент появляется
fadeOut() — уменьшает свойство opacity, элемент исчезает
fadeToggle() увеличивает свойство opacity, элемент появляется/уменьшает свойство opacity, элемент исчезает
fadeTo() изменяет свойство opacity до указанного значения
скольжения
slideDown()  slideUp() slideDown() — разворачивает элемент
slideUp() — сворачивает элемент
slideToggle() разворачивает/сворачивает элемент
стандартные
animate() анимация
delay() задерживает выполнение следующей функции на указанное время
stop() останавливает выполнение текущей анимации
 
 

hide()  show()

Функция hide() — скрывает элемент.
Функция show() — показывает элемент.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  * {
   margin: 0;
   padding: 0;
  }
  .box {
   margin: 5px;
   height: 50px;
  }
  #d1, #d2, #d3 {
   height: 35px;
   width: 100px;
   border-radius: 5px;
   background-color: #0099cc;
   color: #FFF;
   font-size: 26px;
   float: left;
   margin: 5px 0 0 20px;
   text-align: center;
   line-height: 35px;
   cursor: pointer;
  }
  #p1, #p2, #p3 {
   height: 35px;
   width: 400px;
   margin: 5px 0 0 20px;
   text-align: center;
   line-height: 35px;
   float: left;
   background-color: #ffe4e1;
   font-size: 20px;
   color: #000080;
   display: none;
  }
 </style>
</head>
<body>
 <div class="box">
  <div id="d1">Show</div>
  <p id="p1">Hello World!</p>
 </div>
 <div class="box">
  <div id="d2">Show</div>
  <p id="p2">Привет Мир!</p>
 </div>
 <div class="box">
  <div id="d3">Show</div>
  <p id="p3">To be or not to be?</p>
 </div>
 <script>
  $(document).ready(function () {
 
   var counter = 0;
   $('#d1').click(function () {
    counter++;
    if(counter%2 != 0) {
     $(this).text('Hide');
     $('#p1').show();
    }
    else {
     $(this).text('Show');
     $('#p1').hide();
    }
   });
 
   counter = 0;
   $('#d2').click(function () {
    counter++;
    if(counter % 2 != 0) {
     $(this).text('Hide');
     $('#p2').show('slow');
    }
    else {
     $(this).text('Show');
     $('#p2').hide('slow');
    }
   });
 
   counter = 0;
   $('#d3').click(function () {
    counter++;
    if(counter % 2 != 0) {
     $(this).text('Hide');
     $('#p3').show(300);
    }
    else {
     $(this).text('Show');
     $('#p3').hide(300);
    }
   });
 
  });
 </script>
</body>
</html>
 
 
 

toggle()

Функция скрывает/показывает элемент.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  * {
   margin: 0;
   padding: 0;
  }
  .box {
   margin: 5px;
   height: 50px;
  }
  #d1, #d2, #d3 {
   height: 35px;
   width: 100px;
   border-radius: 5px;
   background-color: #0099cc;
   color: #FFF;
   font-size: 26px;
   float: left;
   margin: 5px 0 0 20px;
   text-align: center;
   line-height: 35px;
   cursor: pointer;
  }
  #p1, #p2, #p3 {
   height: 35px;
   width: 400px;
   margin: 5px 0 0 20px;
   text-align: center;
   line-height: 35px;
   float: left;
   background-color: #ffe4e1;
   font-size: 20px;
   color: #000080;
   display: none;
  }
 </style>
</head>
<body>
 <div class="box">
  <div id="d1">Show</div>
  <p id="p1">Hello World!</p>
 </div>
 <div class="box">
  <div id="d2">Show</div>
  <p id="p2">Привет Мир!</p>
 </div>
 <div class="box">
  <div id="d3">Show</div>
  <p id="p3">To be or not to be?</p>
 </div>
 <script>
  $(document).ready(function () {
 
   var counter = 0;
   $('#d1').click(function () {
    counter++;
    if(counter%2 != 0) {
     $(this).text('Hide');
    }
    else {
     $(this).text('Show');
    }
    $('#p1').toggle();
   });
 
   counter = 0;
   $('#d2').click(function () {
    counter++;
    if(counter % 2 != 0) {
     $(this).text('Hide');
    }
    else {
     $(this).text('Show');
    }
    $('#p2').toggle('slow');
   });
 
   counter = 0;
   $('#d3').click(function () {
    counter++;
    if(counter % 2 != 0) {
     $(this).text('Hide');
    }
    else {
     $(this).text('Show');
    }
    $('#p3').toggle(300);
   });
 
  });
 </script>
</body>
</html>
 
 
 

fadeIn()  fadeOut()

Функция fadeIn() — увеличивает свойство opacity, элемент появляется.
Функция fadeOut() — уменьшает свойство opacity, элемент исчезает.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  * {
   margin: 0;
   padding: 0;
  }
 
  .box {
   margin: 5px;
   height: 50px;
  }
 
  #d1, #d2, #d3 {
   height: 35px;
   width: 100px;
   border-radius: 5px;
   background-color: #0099cc;
   color: #FFF;
   font-size: 26px;
   float: left;
   margin: 5px 0 0 20px;
   text-align: center;
   line-height: 35px;
   cursor: pointer;
  }
 
  #p1, #p2, #p3 {
   height: 35px;
   width: 400px;
   margin: 5px 0 0 20px;
   text-align: center;
   line-height: 35px;
   float: left;
   background-color: #ffe4e1;
   font-size: 20px;
   color: #000080;
   display: none;
  }
 </style>
</head>
<body>
 <div class="box">
  <div id="d1">Show</div>
  <p id="p1">Hello World!</p>
 </div>
 <div class="box">
  <div id="d2">Show</div>
  <p id="p2">Привет Мир!</p>
 </div>
 <div class="box">
  <div id="d3">Show</div>
  <p id="p3">To be or not to be?</p>
 </div>
 <script>
  $(document).ready(function () {
 
   var counter = 0;
   $('#d1').click(function () {
    counter++;
    if(counter % 2 != 0) {
     $(this).text('Hide');
      $('#p1').fadeIn();
    }
    else {
     $(this).text('Show');
      $('#p1').fadeOut();
    }
   });
 
   counter = 0;
   $('#d2').click(function () {
    counter++;
    if(counter % 2 != 0) {
     $(this).text('Hide');
     $('#p2').fadeIn('slow');
    }
    else {
     $(this).text('Show');
     $('#p2').fadeOut('slow');
    }
   });
 
   counter = 0;
   $('#d3').click(function () {
    counter++;
    if(counter % 2 != 0) {
     $(this).text('Hide');
     $('#p3').fadeIn(300);
    }
    else {
     $(this).text('Show');
     $('#p3').fadeOut(300);
    }
   });
 
  });
 </script>
</body>
</html>
 
 
 

fadeToggle()

Функция увеличивает свойство opacity, элемент появляется/уменьшает свойство opacity, элемент исчезает.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  * {
   margin: 0;
   padding: 0;
  }
 
  .box {
   margin: 5px;
   height: 50px;
  }
 
  #d1, #d2, #d3 {
   height: 35px;
   width: 100px;
   border-radius: 5px;
   background-color: #0099cc;
   color: #FFF;
   font-size: 26px;
   float: left;
   margin: 5px 0 0 20px;
   text-align: center;
   line-height: 35px;
   cursor: pointer;
  }
 
  #p1, #p2, #p3 {
   height: 35px;
   width: 400px;
   margin: 5px 0 0 20px;
   text-align: center;
   line-height: 35px;
   float: left;
   background-color: #ffe4e1;
   font-size: 20px;
   color: #000080;
   display: none;
  }
 </style>
</head>
<body>
 <div class="box">
  <div id="d1">Show</div>
  <p id="p1">Hello World!</p>
 </div>
 <div class="box">
  <div id="d2">Show</div>
  <p id="p2">Привет Мир!</p>
 </div>
 <div class="box">
  <div id="d3">Show</div>
  <p id="p3">To be or not to be?</p>
 </div>
 <script>
  $(document).ready(function () {
 
   var counter = 0;
   $('#d1').click(function () {
    counter++;
    if(counter % 2 != 0) {
     $(this).text('Hide');
    }
    else {
     $(this).text('Show');
    }
    $('#p1').fadeToggle();
   });
 
   counter = 0;
   $('#d2').click(function () {
    counter++;
    if(counter % 2 != 0) {
     $(this).text('Hide');
    }
    else {
     $(this).text('Show');
    }
    $('#p2').fadeToggle('slow');
   });
 
   counter = 0;
   $('#d3').click(function () {
    counter++;
    if(counter % 2 != 0) {
     $(this).text('Hide');
    }
    else {
     $(this).text('Show');
    }
    $('#p3').fadeToggle(300);
   });
 
  });
 </script>
</body>
</html>
 
 
 

fadeTo()

Функция изменяет свойство opacity до указанного значения.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  * {
   margin: 0;
   padding: 0;
  }
 
  .box {
   margin: 5px;
   height: 50px;
  }
 
  #d1, #d2, #d3 {
   height: 35px;
   width: 100px;
   border-radius: 5px;
   background-color: #0099cc;
   color: #FFF;
   font-size: 26px;
   float: left;
   margin: 5px 0 0 20px;
   text-align: center;
   line-height: 35px;
   cursor: pointer;
  }
 
  #p1, #p2, #p3 {
   height: 35px;
   width: 400px;
   margin: 5px 0 0 20px;
   text-align: center;
   line-height: 35px;
   float: left;
   background-color: #ffe4e1;
   font-size: 20px;
   color: #000080;
   display: none;
  }
 </style>
</head>
<body>
 <div class="box">
  <div id="d1">Show</div>
  <p id="p1">Hello World!</p>
 </div>
 <div class="box">
  <div id="d2">Show</div>
  <p id="p2">Привет Мир!</p>
 </div>
 <div class="box">
  <div id="d3">Show</div>
  <p id="p3">To be or not to be?</p>
 </div>
 <script>
  $(document).ready(function () {
 
   var counter = 0;
   $('#d1').click(function () {
    counter++;
    if(counter % 2 != 0) {
     $(this).text('Hide');
      $('#p1').fadeTo(0, 0.5);
    }
    else {
     $(this).text('Show');
      $('#p1').fadeTo(0, 0);
    }
   });
 
   counter = 0;
   $('#d2').click(function () {
    counter++;
    if(counter % 2 != 0) {
     $(this).text('Hide');
     $('#p2').fadeTo('slow', 0.7);
    }
    else {
     $(this).text('Show');
     $('#p2').fadeTo('slow', 0);
    }
   });
 
   counter = 0;
   $('#d3').click(function () {
    counter++;
    if(counter % 2 != 0) {
     $(this).text('Hide');
     $('#p3').fadeTo(300, 0.9);
    }
    else {
     $(this).text('Show');
     $('#p3').fadeTo(300, 0);
    }
   });
 
  });
 </script>
</body>
</html>
 
 
 

slideDown()  slideUp()

Функция slideDown() — разворачивает элемент.
Функция slideUp() — сворачивает элемент.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  * {
   margin: 0;
   padding: 0;
  }
 
  .box {
   margin: 5px;
   height: 50px;
  }
 
  #d1, #d2, #d3 {
   height: 35px;
   width: 100px;
   border-radius: 5px;
   background-color: #0099cc;
   color: #FFF;
   font-size: 26px;
   float: left;
   margin: 5px 0 0 20px;
   text-align: center;
   line-height: 35px;
   cursor: pointer;
  }
 
  #p1, #p2, #p3 {
   height: 35px;
   width: 400px;
   margin: 5px 0 0 20px;
   text-align: center;
   line-height: 35px;
   float: left;
   background-color: #ffe4e1;
   font-size: 20px;
   color: #000080;
   display: none;
  }
 </style>
</head>
<body>
 <div class="box">
  <div id="d1">Show</div>
  <p id="p1">Hello World!</p>
 </div>
 <div class="box">
  <div id="d2">Show</div>
  <p id="p2">Привет Мир!</p>
 </div>
 <div class="box">
  <div id="d3">Show</div>
  <p id="p3">To be or not to be?</p>
 </div>
 <script>
  $(document).ready(function () {
 
   var counter = 0;
   $('#d1').click(function () {
    counter++;
    if(counter % 2 != 0) {
     $(this).text('Hide');
      $('#p1').slideDown();
    }
    else {
     $(this).text('Show');
     $('#p1').slideUp();
    }
   });
 
   counter = 0;
   $('#d2').click(function () {
    counter++;
    if(counter % 2 != 0) {
     $(this).text('Hide');
     $('#p2').slideDown('slow');
    }
    else {
     $(this).text('Show');
     $('#p2').slideUp('slow');
    }
   });
 
   counter = 0;
   $('#d3').click(function () {
    counter++;
    if(counter % 2 != 0) {
     $(this).text('Hide');
     $('#p3').slideDown(300);
    }
    else {
     $(this).text('Show');
     $('#p3').slideUp(300, 0);
    }
   });
 
  });
 </script>
</body>
</html>
 
 
 

slideToggle()

Функция разворачивает/сворачивает элемент.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  * {
   margin: 0;
   padding: 0;
  }
 
  .box {
   margin: 5px;
   height: 50px;
  }
 
  #d1, #d2, #d3 {
   height: 35px;
   width: 100px;
   border-radius: 5px;
   background-color: #0099cc;
   color: #FFF;
   font-size: 26px;
   float: left;
   margin: 5px 0 0 20px;
   text-align: center;
   line-height: 35px;
   cursor: pointer;
  }
 
  #p1, #p2, #p3 {
   height: 35px;
   width: 400px;
   margin: 5px 0 0 20px;
   text-align: center;
   line-height: 35px;
   float: left;
   background-color: #ffe4e1;
   font-size: 20px;
   color: #000080;
   display: none;
  }
 </style>
</head>
<body>
 <div class="box">
  <div id="d1">Show</div>
  <p id="p1">Hello World!</p>
 </div>
 <div class="box">
  <div id="d2">Show</div>
  <p id="p2">Привет Мир!</p>
 </div>
 <div class="box">
  <div id="d3">Show</div>
  <p id="p3">To be or not to be?</p>
 </div>
 <script>
  $(document).ready(function () {
 
   var counter = 0;
   $('#d1').click(function () {
    counter++;
    if(counter % 2 != 0) {
     $(this).text('Hide');
    }
    else {
     $(this).text('Show');
    }
    $('#p1').slideToggle();
   });
 
   counter = 0;
   $('#d2').click(function () {
    counter++;
    if(counter % 2 != 0) {
     $(this).text('Hide');
    }
    else {
     $(this).text('Show');
    }
    $('#p2').slideToggle('slow');
   });
 
   counter = 0;
   $('#d3').click(function () {
    counter++;
    if(counter % 2 != 0) {
     $(this).text('Hide');
    }
    else {
     $(this).text('Show');
    }
    $('#p3').slideToggle(300);
   });
 
  });
 </script>
</body>
</html>
 
 
 

animate()

Функция выполняет анимацию.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  * {
   margin: 0;
   padding: 0;
  }
 
  .a {
   height: 50px;
   width: 50px;
   margin: 20px 0 0 20px;
   background-color: #9b30ff;
  }
 </style>
</head>
<body>
 <div id="d1" class="a"></div>
 <script>
  function funA() {
   $('#d1').animate({ 'width': '300px' }, 3000);
   $('#d1').animate({ 'width': '50px' }, 3000);
  }
  $(document).ready(function () {
   /*вечность*/
   setInterval('funA()', 0);
  });
 </script>
</body>
</html>
 
 
 

delay()

Функция задерживает выполнение следующей функции на указанное время.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  * {
   margin: 0;
   padding: 0;
  }
 
  .a {
   height: 50px;
   width: 50px;
   margin: 20px 0 0 20px;
   background-color: #9b30ff;
  }
 </style>
</head>
<body>
 <div id="d1" class="a"></div>
 <script>
  function funA() {
   $('#d1').animate({ 'width': '300px' }, 3000);
   /*задержка*/
   $('#d1').delay(1000);
   $('#d1').animate({ 'width': '50px' }, 3000);
  }
  $(document).ready(function () {
   /*вечность*/
   setInterval('funA()', 0);
  });
 </script>
</body>
</html>
 
 
 

stop()

Функция останавливает выполнение текущей анимации.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  * {
   margin: 0;
   padding: 0;
  }
 
  .a {
   height: 50px;
   width: 50px;
   margin: 20px 0 0 20px;
   background-color: #9b30ff;
   color: #FFF;
   text-align: center;
   line-height: 50px;
  }
 </style>
</head>
<body>
 <div id="d1" class="a"></div>
 <script>
  function funA() {
   $('#d1').animate({ 'width': '300px' }, 3000);
   $('#d1').animate({ 'width': '50px' }, 3000);
  }
  $(document).ready(function () {
   for(var i = 0; i < 5; i++) {
    funA();
    if(i == 2) {
     $('#d1').stop();
     break;
    }
   }
  });
 </script>
</body>
</html>