Блог веб разработки

Блог веб-разработки статьи | видеообзоры | исходный код

hide show JQuery

Пожалуй, наиболее полезный тип динамического эффекта, который нам может понадобиться применить к элементу или группе элементов, - это простое скрытие и отображение элементов.

Все примеры мы будем рассматривать на примере этого кода:

<!DOCTYPE>
<html>
    <head>
        <meta charset="utf-8">
        <script type="text/javascript" src="js/jquery.js"></script>
        <title>
            Отображение и скрытие элементов
        </title>
    </head>
    <body>
    <style>
        .sub{
            display:none;
        }
        .sub li{
            list-style: none;
        }
        li{
            cursor:pointer;
        }
    </style>
       <img src="bg2.jpg" alt="Картинка"/>
        <ul>
            <li>
		<span>Новости</span>
                <ul class="sub">
                    <li> - Свежие</li>
                    <li> - Последние</li>
                    <li> - Все</li>
                </ul>
            </li>
            <li>
                <span>Карты</span>
		<ul class="sub">
                    <li> - Яндекс</li>
                    <li> - Google</li>
                </ul>
            </li>
        </ul>
    </body>
</html>

Приступим , и первое что мы с вами рассмотрим это методы show() и hide(). Как вы наверное уже догадались из наименования show() - Отображает элемент; hide() - скрывает элемент.

Давайте скроем наше изображение:

$("img").hide();

Как видите после выполнения данной строчки наше изображение мгновенно исчезло.

Если у нас на странице есть скрытые элементы(display:none;), то мы можем их отобразить используя метод show(), к примеру:

<img alt="Картинка" src="bg2.jpg" style="display:none;"/>
<script>
    $("img").show();
</script>

Эти методы также могут принимать два необязательных параметра, первый это время выполнения метода(задается в миллисекундах), второй функция которая вызывается после завершения выполнения метода, рассмотрим:

$("img").hide(1000, function(){
    $("img").show(1000);
});

1000 - это миллисекунды или 1 секунда, как видите вначале мы скрываем наше изображение за 1 секунду , а затем у нас во втором параметре вызывается анонимная функция в которой мы за 1 секунду отображаем элемент заново.

Помимо методов show() и hide() в jquery, реализованы еще несколько методов для скрытия и отображения элементов.

fadeIn() - отобразить элемент и fadeOut - скрыть элемент. Данные методы отличаются от предыдущих лишь эффектом исчезновения.

$("img").fadeOut(1000, function(){
    $("img").fadeIn(1000);
});

Как видите при скрытии и отображении элементов у нас плавно меняется прозрачность(opacity) от 0 до 1

Если мы хотим реализовать эффект свертывания и развертывания, то для этого отлично подойдут такие методы, как:

slideUp() - скрыть элемент и slideDown() - отобразить элемент.

$("img").slideUp(1000, function(){
    $("img").slideDown(1000);
});

Такие методы часто применяются для свертывания и развертывания списков.

Напишем небольшой скрипт для развертывания и свертывания наших подкатологов:

$("ul li span").click(function(){
     var sub = $(this).find("+.sub");
   if(sub.css('display') !== 'none'){
       sub.slideUp(200);
   }else{
       sub.slideDown(200);
   }
});

Как видите теперь если мы кликнем по какому-нибудь элементу списка, то у нас развернется его подкаталог.

Используя данные методы следует помнить что они в конечном итоге работают с изменением свойства display при скрытии элемента оно равняется none. Их отличие лишь в эффекте исчезновения элемента. Если мы эти методы будет использовать без установки времени выполнения, то они по сути друг от друга ничем отличаться не будут.

На этом данная статья подходит к концу. Я очень надеюсь что данная статья была для вас содержательна и интересна. Удачи!

Оцените статью

Еще статьи

map js

Технология web workes в html5

CSS перенос слов

Fetch HTML

php.ini php

details html

template html

selection javascript

Типы параметров функций и методов в php7

Комментарии

Антон

Перезвоните мне пожалуйста 8 (950) 000-06-64 Антон.

03:56 21-08-2019

История

    НОВОСТИ

    • Опубликовал приложение под android 'Аудиокниги'. Кому интересно, переходите по ссылке