2 秒后在视口中显示/隐藏 div

Question

I want show when its in viewport after 2 seconds.我想在 2 秒后显示它在视口中的时间。 And if its not in viewport just hide.如果它不在视口中，请隐藏。

I watched a code, but its relative to other div and without delay.我看了一个代码，但它相对于其他 div 并且没有延迟。

Thx!谢谢！

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

Answer 1

You can refer this link - slideToggle w3school你可以参考这个链接 - slideToggle w3school

slideToggle jquery api滑动切换 jquery api

Definition and Usage The slideToggle() method toggles between slideUp() and slideDown() for the selected elements.定义和用法slideToggle() 方法在选定元素的 slideUp() 和 slideDown() 之间切换。

This method checks the selected elements for visibility.此方法检查所选元素的可见性。 slideDown() is run if an element is hidden.如果元素被隐藏，则运行 slideDown()。 slideUp() is run if an element is visible - This creates a toggle effect.如果元素可见，则运行 slideUp() - 这会创建切换效果。

Syntax句法

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

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

Another example you can use this also Please refer this link - > fadeToggle另一个你也可以使用的例子请参考这个链接-> fadeToggle

$(function() {
        $('#ButtonClick').on('click', function() {
            $('#HideShowDiv').delay(1000).fadeToggle();
        });
});

Answer 2

The below SO snippet might help!下面的 SO 片段可能会有所帮助！

 <,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>

2 秒后在视口中显示/隐藏 div

问题描述

2 个解决方案

解决方案1
1 2019-10-12 05:33:57

解决方案2
0 2019-10-12 03:28:00

2 秒后在视口中显示/隐藏 div

问题描述

2 个解决方案

解决方案1 1 2019-10-12 05:33:57

解决方案2 0 2019-10-12 03:28:00

解决方案1
1 2019-10-12 05:33:57

解决方案2
0 2019-10-12 03:28:00