Issue with visibility :hidden In jquery slidedown() function

Question

When I am using display:none to a div and using slidedown function of JQuery to slide the div then it works but the divs get scattered on display:none ,instead of this when i am Visibilty:none to a div then the other divs do not scatter but the JQuery does not works.

#slider {
    overflow:hidden;
    position:relative;
}
.form-notice {
    display:none;
    float:left;
    width:24.3%;
}

Read http://stackoverflow.com/questions/133051/what-is-the-difference-between-visibilityhidden-and-displaynone — Tushar Gupta - curioustushar, Feb 12 '14 at 05:56

score 1 · Answer 1 · answered Feb 12 '14 at 05:49

1

display: none; takes the element out of the flow of the document, so it does not retain any block level positioning on the page. visibility: hidden; simply makes the element invisible, but it still takes up the same space on the page. The built-in .slideDown() method (along with .slideUp() and .slideToggle() ) make use of display:none.

Instead, try using the .animate() method on the opacity css property and maybe chain a .css() method to it that gives it visibility: hidden; as a backup for older browsers.

answered Feb 12 '14 at 05:49

danwarfel

890
1
6
13

may i add this method to jquery .firstly i set method to hide on load and chain it with slideup() – atom Feb 12 '14 at 05:53
`.slideUp()` will cause the matched element to have `display: none;`, so that will remove it from the document flow. If you don't want this to happen, try this: $('button').eq(0).click(function() { $('p').slideUp(); }); $('button').eq(1).click(function() { $('p').animate({'opacity': 0}); }); [JSFiddle](http://jsfiddle.net/3zweb/) – danwarfel Feb 12 '14 at 06:02

score 1 · Accepted Answer · answered Feb 12 '14 at 06:17

An immediate solution can be: First Add margin-left to your slider class

 .slider {
     float: left;
    margin-top: 0;
    width: 47.3%;
    margin-left: 329px;
    }

And set it auto inside this function:

$("#request").click(function(){
      $(".form-notice").slideDown();
      $(".slider").css("margin-left","auto");
 });

score 0 · Answer 3 · answered Feb 12 '14 at 05:51

0

the difference between display:none and visibility:none is that the display:none not fill the place where you placed a div but visibility:none occupy the place, and slide property add a display:none and display:block to the element after animation is complete. So its better to use display property instead of visibility.

answered Feb 12 '14 at 05:51

Arjun

1,431
1
12
32

but my problem is with div. the other divs get scattered thats the problem. – atom Feb 12 '14 at 05:56
so you have to use animation instead of slide to use visibility. – Arjun Feb 12 '14 at 05:57
and also you can use podition absolute to the div which you want to slide. this does not affect the another divs. – Arjun Feb 12 '14 at 06:00
1

Try doing this: `$('p').animate({'opacity': 0});`. See [JSFiddle](http://jsfiddle.net/3zweb/) – danwarfel Feb 12 '14 at 06:04

Issue with visibility :hidden In jquery slidedown() function

3 Answers3