CODEWITHSUNDEEP
javascriptjquery
Kirk Strobeck
Kirk Strobeck

Reputation: 18559

jQuery slide down toggle, impossible?

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'
    }
);

Upvotes: 3

Views: 10468

Answers (7)

Dr.Molle
Dr.Molle

Reputation: 117314

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)

Upvotes: 2

Carsen
Carsen

Reputation: 419

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.

Upvotes: 0

Wasim Karani
Wasim Karani

Reputation: 8886

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>

Upvotes: 0

Richard Marskell - Drackir
Richard Marskell - Drackir

Reputation: 13292

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

Upvotes: 1

Josiah Ruddell
Josiah Ruddell

Reputation: 29831

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.

Upvotes: 0

diagonalbatman
diagonalbatman

Reputation: 17992

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.

Upvotes: 0

Yoram de Langen
Yoram de Langen

Reputation: 5499

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?

Upvotes: 0

Related Questions