jQuery向下滑动切换，不可能？

Question

I want to do a slide down with jQuery, but I can't find it anywhere.

I do not want it to scale as it slides
I do want it to perform this action ( click slide ), but vertically down, not horizontally right.

UPDATE :

So here's the final functional code!

$(this).toggle(
    "slide", 
    {
        direction: 'up',
        duration: 'slow',
        easing: 'easeOutQuart'
    }
);

Answer 1

Read the API-Docs: http://docs.jquery.com/UI/Effects/Slide

You can Slide in every direction using the direction-option.

Demo: http://www.jsfiddle.net/doktormolle/befbE/ (I set the width/height of the image inside the sliding element to 100%, so you can see, the image is not scaled, it's clipped, guess that's what you are looking for)

Answer 2

If you position the element absolutely in a container and attach it to the bottom (ie. position:absolute;bottom:0; ) you can use the blind effect and it will slide down to the bottom from the top. See here

Answer 3

If you want it the make own ur you, can you use .animate() and you using css.

something like:

css:

#elm { width: 150px; height: 80px; position: absolute; left: -150px; }

script:

// let it animate
$('#elm').animate({ display: 'block', left: 0 }, 'fast');

else if you dont wanna make it on your own, use that jQuery UI 'slide' effect?

Answer 4

I know what you mean - the items inside the DIV or whatever you are animating look like they are squahsed, and then expand.

Maybe consider hiding the element behind another and either move the masking element up and out of the way or slide the hidden element down using .animate()?

jQuery .click .animate to move down, then back up

This may help.

Answer 5

You can easily achieve this with an inner container that has fixed dimentions.

See this live example . In the fiddle, the first div is without the inner container.

This way when the outer container animates (width/height) the inner container does not grow, simply reveals .

Answer 6

Consider your image of height 150px

First apply height="0"

Use animate to achieve slide down effect

<img src="http://www.google.com/images/nav_logo29.png" id="image_scale" width="200" height="0" />

<script>
$(document).ready(function(){
    $("#image_scale").animate({height:"150px"},"5000");
});
</script>

Answer 7

Absolutely position the element you are wanting to slide in and out and use .animate() to change it's position. You can have it slide in from the top, bottom, left, right, on the diagonal or however you want with this method.