How to make div slidedown

Sorry I'm really new to JQUery and would like to know 开发者_如何转开发how do I make an Div Slide Down?

JQuery is confusing to me and really just need help

---

Try this:

HTML:

<button id="click_to_slide"></button>
<div id="me_down" style="display:none;">I'm Sliding down</div>

Javascript:

$('#click_to_slide').click(function () {
        $('#me_down').slideDown();
    });

And Optional CSS:

#me_down {
    color:white;
    width: 100px;
    height: 100px;
    background-color: #000;
}

Try this, and it will work :)

---

HTML

<a id="click_to_slide">Click To Slide Down</a>
<div id="slide_me_down"></div>

CSS

#slide_me_down {
    display: none;
    width: 100px;
    height: 100px;
    background-color: #000;
}

JAVASCRIPT

$(document).ready(function () {
    $('#click_to_slide').live('click', function () {
        $('#slide_me_down').slideDown();
    });
});

Here is a jsfiddle of the above code: http://jsfiddle.net/EfmeW/

Also if you want to have the div slideUp and Down depending on whether or not the div is already visible or not you can use .slideToggle() instead of .slideDown()

---

To slide an element down, just use this:

<script type="text/javascript">
$(document).ready(function() {
$('#test').slideDown();
});
</script>

<div id="test" style="background-color:lightgrey;border:2px solid grey;padding:10px;">Hello, this will slide down.</div>

Check out an example here: http://jsfiddle.net/WvVf3/1/

Hope this helps.

---

When you say slide down, do you mean:

• make the div appear by sliding down: $('#me').slideDown();

or

• make the div slide down: $('#me').css('position','relative').animate({top:'+200'},'slow');

http://jsfiddle.net/rkw79/AnTDk/5/

---

Use the following JQuery. You'll need to have a div with class myDivClass as JQuery uses CSS-selectors to find elements. The document.ready part is to ensure your page is fully downloaded / parsed before the Javascript is executed (this is a crucial step).

 $(document).ready(function() {
   $('.myDivClass').slideDown();
 });

Here is a JSFiddle as an example to have a div slide down on a button press.

P.S. If you are using Firebug or Chrome right, you can try this out right now on this page!

 $('#hlogo').hide().slideDown('slow');