Show div after delay on Magento 2 with JQuery

Question

I need to show this div after 3 seconds on my page.

    <div id="cratepop">
    <br>
    <center><img src="/shoppingcart.png"></center>
    <br>
    </div>

Tried using this but it's not working. Any help?

        <script type="text/javascript">
    require(['jquery'],function($ ){


  $(document).ready(function(){
        setTimeout(function(){
        $('#cratepop').show();
        }, 3000);     


        });


    });
</script>

Answer 1

<div id="cratepop" style="display:none;">
    <br>
        <center><img src="/shoppingcart.png"></center>
    <br>
</div>

jQuery Code:

jQuery(document).ready(function(){
        setTimeout(function(){
            jQuery('#cratepop').show();
        }, 5000);     
});

The only one thing you have to do is HIDE your DIV using CSS.

jSfiddle - https://jsfiddle.net/wqq8Lcka/13/

Note: I dont recommend you to use inline CSS. this is just for an example.

Answer 2

I can't add comments yet so.. You are using this code:

jQuery(document).ready(function(){
    setTimeout(function(){
        jQuery('#cratepop').show();
    }, 5000);     
});

But in require you alias jquery as $ so simply replace jQuery with $ in above code.

Answer 3

Add style="display:none;" in your code and everything will work fine.

   <div id="cratepop" style="display:none;">
    <br>
    <center><img src="/shoppingcart.png"></center>
    <br>
    </div>

Also try to show alert after 3 seconds..for testing purpose only :)

 <script type="text/javascript">
    require(['jquery'],function($ ){

  $(document).ready(function(){
        setTimeout(function(){
        alert('Joe is good');//for testing purpose only
        $('#cratepop').show();
        }, 3000);     
        });
    });
</script>