Изучаем jQuery. Часть 7.1 Методы манипуляции над элементами (дополнение)
Доброго времени суток. Данная статья является дополнением к статье «Изучаем jQuery. Часть 7.1 Методы манипуляции над элементами». В данной статье Вы не узнаете ничего нового. Но в этой статье Вы найдете видео с примерами демонстрации методов. Так, что если интересно, то вперед…
Метод hide()
Рассмотрим html-код:
<!doctype html> <html lang="ru"> <head> <meta charset="UTF-8"> <link href="./css/style.css" rel="stylesheet" media="screen"> <script src="http://yandex.st/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="./js/script.js"></script> <title>Изучаем jQuery</title> </head> <body> <div id="wrapper"> <div id="header" align="center">Header</div> <div id="example">Example</div> <div id="content"> <p>Content</p> <p>Test</p> </div> <div id="sidebar"><span>Sidebar</span></div> <div id="clear"></div> </div> <div id="footer"> Footer </div> </body> </html>
С помощью метода hide мы хотим скрыть элемент div с id=»example» за четыре секунды. Для этого в нашем файле скриптов добавляем следующий код:
$(function(){
$("#example").hide(4000);
});
Посмотрим, что получилось.
[tube]https://www.youtube.com/watch?v=af1r7CaPgsI[/tube]
Метод show()
Рассмотрим html-код приведенный выше. Давайте сделаем, чтобы div с id=»example» скрылся за четыре секунды (это мы проделали выше). А затем снова появился за четыре секунды. Для этого мы будем использовать метод show(). Напишем в наш файл скриптов следующий код:
$(function(){
$("#example").hide(4000);
$("#example").show(4000);
});
Но так, лучше не делать мы два раза выбираем один и тот же элемент, а это дольше работает плюс забирает лишние ресурсы. Изменим наш код:
$(function(){
var a = $("#example").hide(4000);
a.show(4000);
});
Что мы сделали? Просто в переменную а поместили нашу выборку.
Давайте посмотрим, что получилось.
[tube]https://www.youtube.com/watch?v=BU2H_9SMFTI[/tube]
Метод toggle()
Возьмем html-код приведенный выше. Теперь мы хотим, чтобы элемент div c id=»example» исчез, если он был видим за четыре секунда или появился, если он был невидим за четыре секунды. Для этого используем метод toggle(). Добавим в наш файл скриптов следующий код:
$(function(){
$("#example").toggle(4000);
});
Теперь не меняя скрипта изменим html-код (скроем элемент div с id=»example»):
<!doctype html> <html lang="ru"> <head> <meta charset="UTF-8"> <link href="./css/style.css" rel="stylesheet" media="screen"> <script src="http://yandex.st/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="./js/script.js"></script> <title>Изучаем jQuery</title> </head> <body> <div id="wrapper"> <div id="header" align="center">Header</div> <div id="example" style="display:none">Example</div> <div id="content"> <p>Content</p> <p>Test</p> </div> <div id="sidebar"><span>Sidebar</span></div> <div id="clear"></div> </div> <div id="footer"> Footer </div> </body> </html>
Проверим, что получилось.
[tube]https://www.youtube.com/watch?v=dvKqtiPll5g[/tube]
Метод fadeOut()
Рассмотрим html-код:
<!doctype html> <html lang="ru"> <head> <meta charset="UTF-8"> <link href="./css/style.css" rel="stylesheet" media="screen"> <script src="http://yandex.st/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="./js/script.js"></script> <title>Изучаем jQuery</title> </head> <body> <div id="wrapper"> <div id="header" align="center">Header</div> <div id="example">Example</div> <div id="content"> <p>Content</p> <p>Test</p> </div> <div id="sidebar"><span>Sidebar</span></div> <div id="clear"></div> </div> <div id="footer"> Footer </div> </body> </html>
Теперь мы хотим, чтобы элемент div с id=»example» растворился за четыре секунды. Для этого и применяется метод fadeOut(). Добавим в наш файл скриптов следующий код:
$(function(){
$("#example").fadeOut(4000);
});
Посмотрим, что получилось.
[tube]https://www.youtube.com/watch?v=F3hSJz1c9lM[/tube]
Метод fadeIn()
Рассмотрим html-код, в котором элемент div с id=»example» скрыт
<!doctype html> <html lang="ru"> <head> <meta charset="UTF-8"> <link href="./css/style.css" rel="stylesheet" media="screen"> <script src="http://yandex.st/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="./js/script.js"></script> <title>Изучаем jQuery</title> </head> <body> <div id="wrapper"> <div id="header" align="center">Header</div> <div id="example" style="display:none">Example</div> <div id="content"> <p>Content</p> <p>Test</p> </div> <div id="sidebar"><span>Sidebar</span></div> <div id="clear"></div> </div> <div id="footer"> Footer </div> </body> </html>
Мы хотим, чтоб элемент div с id=»example» появился меняя свою прозрачность за четыре секунды. Для этого и используется метод fadeIn().
Добавим следующий код в наш файл скриптов:
$(function(){
$("#example").fadeIn(4000);
});
Проверим, что у нас получилось.
[tube]https://www.youtube.com/watch?v=0WeBQMXvAlQ[/tube]
Метод fadeTo()
Рассмотрим предыдущий html-код. Элемент div с id=»example» скрыт. Мы хотим, что бы этот элемент изменил свою прозрачность до 0.5 за две секунды. Для этого используется метод fadeTo(). В файл скриптов добавим следующий код:
$(function(){
$("#example").fadeTo(2000,0.5);
});
Посмотрим, что получилось.
[tube]https://www.youtube.com/watch?v=Jc-zkImqRWM[/tube]
Метод fadeToggle()
Рассмотрим html-код:
<!doctype html> <html lang="ru"> <head> <meta charset="UTF-8"> <link href="./css/style.css" rel="stylesheet" media="screen"> <script src="http://yandex.st/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="./js/script.js"></script> <title>Изучаем jQuery</title> </head> <body> <div id="wrapper"> <div id="header" align="center">Header</div> <div id="example">Example</div> <div id="content"> <p>Content</p> <p>Test</p> </div> <div id="sidebar"><span>Sidebar</span></div> <div id="clear"></div> </div> <div id="footer"> Footer </div> </body> </html>
Элемент div c id=»example» не скрыт. Нам необходимо сделать так, чтобы, если div c id=»example» не скрыт, то скрыть его, а если этот элемент скрыть, то показать его путем изменения прозрачности. Для этого используется метод fadeToggle(). Добавим в наш файл скриптов следующий код:
$(function(){
$("#example").fadeToggle(4000);
});
Посмотрим, что получилось. Затем добавим к элементу div с id=»example» сттиль, который его спрячет. И посмотрим опять, что получилось.
Смотрим видео.
[tube]https://www.youtube.com/watch?v=NfZr1_rS40A[/tube]
Метод slideUp()
Рассмотрим html-код:
<!doctype html> <html lang="ru"> <head> <meta charset="UTF-8"> <link href="./css/style.css" rel="stylesheet" media="screen"> <script src="http://yandex.st/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="./js/script.js"></script> <title>Изучаем jQuery</title> </head> <body> <div id="wrapper"> <div id="header" align="center">Header</div> <div id="example">Example</div> <div id="content"> <p>Content</p> <p>Test</p> </div> <div id="sidebar"><span>Sidebar</span></div> <div id="clear"></div> </div> <div id="footer"> Footer </div> </body> </html>
Теперь мы хотим, чтобы элемент div с id=»example» свернулся вверх за четыре секунды. Для этого используется метод sladeUp(). Добавим следующий код в наш файл скриптов:
$(function(){
$("#example").slideUp(4000);
});
Давайте посмотрим, что получилось.
[tube]https://www.youtube.com/watch?v=Em8RjBBa0Wg[/tube]
Метод slideDown()
Рассмотрим следующий html-код:
<!doctype html> <html lang="ru"> <head> <meta charset="UTF-8"> <link href="./css/style.css" rel="stylesheet" media="screen"> <script src="http://yandex.st/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="./js/script.js"></script> <title>Изучаем jQuery</title> </head> <body> <div id="wrapper"> <div id="header" align="center">Header</div> <div id="example" style="display:none">Example</div> <div id="content"> <p>Content</p> <p>Test</p> </div> <div id="sidebar"><span>Sidebar</span></div> <div id="clear"></div> </div> <div id="footer"> Footer </div> </body> </html>
Как видим элемент div с id=»example» скрыт. Теперь мы хотим, чтобы этот элемент развернулся за четыре секунды. Для этого используется метод sladeDown(). Давайте в наш файл скриптов поместим следующий код.
$(function(){
$("#example").slideDown(4000);
});
Смотрим, что получилось.
[tube]https://www.youtube.com/watch?v=v1G43yaZ6kc[/tube]
Метод slideToggle()
Метод slideToggle() разворачивает элемент, если он свернуть, и сворачивает, если элемент развернут.
Рассмотрим предыдущий html-код. Наш элемент div с id=»example» свернут. Применим к нему метод slideToggle(4000), чтобы он развернулся за четыре секунды. В файл со скриптами добавим следующий код:
$(function(){
$("#example").slideToggle(4000);
});
Теперь рассмотрим следующий html-код:
<!doctype html> <html lang="ru"> <head> <meta charset="UTF-8"> <link href="./css/style.css" rel="stylesheet" media="screen"> <script src="http://yandex.st/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="./js/script.js"></script> <title>Изучаем jQuery</title> </head> <body> <div id="wrapper"> <div id="header" align="center">Header</div> <div id="example">Example</div> <div id="content"> <p>Content</p> <p>Test</p> </div> <div id="sidebar"><span>Sidebar</span></div> <div id="clear"></div> </div> <div id="footer"> Footer </div> </body> </html>
Т.е. элемент div с id=»example» развернут. Теперь обновим страницу. Элемент div c id=»example» должен свернуться.
Смотрим.
[tube]https://www.youtube.com/watch?v=GmD0GG9Ca9s[/tube]
[…] Пример действия данного метода можно посмотреть тут. […]