Показать / скрыть div в окне просмотра через 2 секунды - PullRequest
Новая
       1

Показать / скрыть div в окне просмотра через 2 секунды

0 голосов
/ 12 октября 2019

Я хочу показать, когда его в окне просмотра через 2 секунды. И если его нет в окне просмотра, просто скрыть.

Я смотрел код, но он относительно другого div и без задержки.

Thx! 

$(window).scroll(function() {
    if ($('.waar').is(':in-viewport')) {
        $('.sticky-info').hide();
    } else {
        $('.sticky-info').show();
    }
});

Ответы [ 2 ]

1 голос
/ 12 октября 2019

Вы можете обратиться по этой ссылке - slideToggle w3school

slideToggle jquery api

Определение и использование SlideToggle () метод переключает между slideUp () и slideDown () для выбранных элементов.

Этот метод проверяет выбранные элементы на видимость. slideDown () запускается, если элемент скрыт. slideUp () запускается, если элемент виден - это создает эффект переключения.

Синтаксис 

$(selector).slideToggle(speed,easing,callback)

 1. $(Your selectior).slideToggle("fast"); // fast
 2. $(Your selectior).slideToggle("medium"); // meduim 
 3. $(Your selectior).slideToggle("slow"); // slow

Еще один пример, который можно использовать, также, пожалуйста, обратитесь по этой ссылке-> fadeToggle 

$(function() {
        $('#ButtonClick').on('click', function() {
            $('#HideShowDiv').delay(1000).fadeToggle();
        });
});
0 голосов
/ 12 октября 2019

Ниже приведенный фрагмент кода может помочь! 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      #container {
        height: 1000px;
        position: relative;
        margin-top: 40px;
      }
      #inner {
        width: 50%;
        color: white;
        margin: auto;
        height: 50px;
        background-color: green;
      }

      #sticky-info {
        top: 0;
        position: fixed;
        z-index: 1;
        display: block;
        background-color: hotpink;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div id="inner">
        Scroll me out of viewport
      </div>
      <div id="sticky-info">
        Element in view
      </div>
    </div>
    <script>
      let inView = true;
      let timeout = null;
      window.addEventListener("scroll", () => {
        const bounding = document
          .getElementById("inner")
          .getBoundingClientRect();

        if (
          bounding.top >= 0 &&
          bounding.left >= 0 &&
          bounding.right <= window.innerWidth &&
          bounding.bottom <= window.innerHeight
        ) {
          if (!inView) {
            inView = true;
            clearTimeout(timeout);
            timeout = setTimeout(() => {
              document.getElementById("sticky-info").style.display = "block";
            }, 2000);
          }
        } else {
          if (inView) {
            clearTimeout(timeout);
            inView = false;
            timeout = setTimeout(() => {
              document.getElementById("sticky-info").style.display = "none";
            }, 2000);
          }
        }
      });
    </script>
  </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...