Issues with jquery slide up - slidedown - The div doesn't appear

I've some problem with jquery SlideDown. I think the problem is in the display:none of css but I need to start with the div hidden.

HTML

    <div id="miao">CIAO</div>

JQUERY

   var screenok = $(window).height();
     $(document).scroll(function() {
     if ($(this).scrollTop() < screenok/3) {
            $("#miao").slideUp(200);
        } else {
            $("#miao").slideDown(200);
        }

    });

CSS

          #miao{ height: 100px; 
          width: 100%; 
          position: fixed; 
          top: 0px;  
          left:0px; 
          z-index:20; 
          background:white; margin:auto; display:none;} 

JSFIDDLE LINK

https://jsfiddle.net/vtxLqjkw/1/

Thank you very much

Answers 1

  • Instead of keeping display:none in the default styling of the element, you can remove that property from your CSS and call .hide() on it on $(document).ready() like this:

    $(document).ready(function() {
      var screenok = $(window).height();
    
      // hide the element initially
      $("#miao").hide();
      $(document).scroll(function() {
        if ($(this).scrollTop() < screenok / 3) {
          $("#miao").slideUp(200);
        } else {
          $("#miao").slideDown(200);
        }
      });
    
    });
    

    The .hide() function sets display:none on the element, so it's effectively doing what your style is doing, just not making it a permanent property value.


Related Articles