CODEWITHSUNDEEP
javascriptjqueryhtml
user2418397
user2418397

Reputation: 1

jQuery slideDown upon loading

I'm trying to make all of the divs on my website slide down when it loads but it just doesn't. I've made a separate document for my jQuery though.

This is the HTML tag to link the 2 documents together:

<head>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>

and this is the jQuery code that makes all the divs slide down upon loading the document:

$(document).ready(function() {
var div=$("div").slideDown("slow");
};

I've set the display to none in my CSS but now none of the divs show up. If anyone can tell me the problem then that would be great!

Upvotes: 0

Views: 99

Answers (5)

DACrosby
DACrosby

Reputation: 11470

Looks like you're missing a ). Here's a working example: http://jsfiddle.net/daCrosby/cuEHB/

CSS

div{
    display:none;
}

HTML

<div>
    content
</div>
<div>
    content
</div>

jQuery

$(document).ready(function() {
    var div = $("div").slideDown("slow");
});

Upvotes: 1

Pedro Monte
Pedro Monte

Reputation: 235

I think your code is right but is missing one ) at the end, see in the browser console if you have a jquery error

$(document).ready(function() {
var div=$("div").slideDown("slow");
});

Upvotes: 2

zhujy_8833
zhujy_8833

Reputation: 571

I believe you need to set the height for all of the divs in CSS. This is because jquery slideDown function will do the animation based on the css height. Since you already set the display: none to all of the divs, all you need to do, hopefully, is to add the height attribute with your expected value, e.g. height : 120px.

Upvotes: 0

overflow
overflow

Reputation: 11

HTML

 <div id="slide" style="display:none;">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
 </div>

Jquery

$(document).ready(function()
{
    $("#slide").slideDown("slow").show();
});

Upvotes: 0

Dhaval Marthak
Dhaval Marthak

Reputation: 17366

See Demo

HTML

<input type="button" value="Down" id="Down">
<div>
    BlaBlaBlaBlaBlaBlaBlaBlaBla
    BlaBlaBlaBlaBlaBlaBlaBlaBla
</div>

jQuery

$("div").hide();
$("#Down").click(function(){
   $("div").slideDown("slow");
});

Upvotes: 0

Related Questions