slideUp only hides? can't show using slideUp

Question

#bannerFijo is a fixed banner display:none at bottom:0px; so to show it I should slideUp() but it seems that this is not working.

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

        $('#bannerFijo .close').click(function() {
            ocultar_banner();
        });
    });
</script>

(and it does using show/hide)

 <script type="text/javascript">
    function mostrar_banner() {
        $('#bannerFijo').show();
    }
    function ocultar_banner(){
        $('#bannerFijo').hide();
    }
    $(document).ready(function() {
        mostrar_banner();

        $('#bannerFijo .close').click(function() {
            ocultar_banner();
        });
    });
</script>

I tried

$('#bannerFijo').show("slide", { direction: "up" });

to show it and I get an error in jquery.min.js.

o.easing[this.options.easing || (o.easing.swing ? "swing" : "linear")] is not a function  
[Detener en este error] (function(){var R=/((?:\((?:\([^()]+\)...ypeof K==="string"?K:K+"px")}})})();
jquery....min.js (línea 31)

Does anybody see an alternative here?

Here is a screenshot of the page for reference.

slideUp will only hide: http://api.jquery.com/slideUp, you cannot slide up to show, only down. the suggestion below might be a better option — Luke Duddridge, Aug 19 '11 at 11:59
Please see my answer and say what part of it doesn't work or fit as solution — Pehmolelu, Aug 19 '11 at 12:28

Pehmolelu · Answer 1 · 2011-08-19T12:11:00.990

4

Have you tried to just do slideDown to show and slideUp to hide? Even though what you seek is reverse in sense..

When you have element in bottom, and you do slideDown, its a show event with "slide" effect. Since its on bottom, the animation shows in reverse. Atleast to the eye. But its actually sliding down, and because it has hitted the bottom, it raises up.

EDIT: Heres jsFiddle example: http://jsfiddle.net/fddpp/

edited Aug 19 '11 at 12:11

answered Aug 19 '11 at 12:00

Pehmolelu

3,534
2
26
31

if you check the image out; when it's slided first you see the bottom of the image and last thing it's show are the 'present boxes' and needs to be opposite :( – Toni Michel Caubet Aug 19 '11 at 12:34
@Toni, so you checked that out? Or just thought so because of the function name down? slideDown in bottom is actually "slideUp" that shows up. – Pehmolelu Aug 19 '11 at 12:39
yes yes i did, but as i told you it doesn't really give the feeling that is animating top/bottom but height.. and i need to see the gift boxes (from the image in my question) first; thanks a lot anyway :) – Toni Michel Caubet Aug 19 '11 at 12:41

score 3 · Accepted Answer · answered Aug 19 '11 at 11:57

3

You might be able to use animate to achieve this, depending on the location and style of the element:

$('#bannerFijo').animate({ height: desiredHeight }, lengthOfAnimation, function() {
    //executes on completion
});

Obviously you would need to define desiredHeight and lengthOfAnimation.

answered Aug 19 '11 at 11:57

Grant Thomas

44,454
10
85
129

div is position:fixed; bottom:0px; display:none; i will play with this and let you know. Do you think i shall instead of display:none; begin with bottom:-100px; and then animate? – Toni Michel Caubet Aug 19 '11 at 11:59
1

@Toni Michel Caubet: Hm, there are a number of possibilities when using `animate` directly, since you _can_ alter CSS and manipulate properties in a custom manner (for example, you could do `bottom: desiredBottom` or pretty much alter any CSS property), so I would suggest playing with it a little as you say, and see what works. :) – Grant Thomas Aug 19 '11 at 12:04
tried the animate line you posted, changin height->bottom (from -100px to 0px) and it doesn't work. any idea why?? – Toni Michel Caubet Aug 19 '11 at 12:19
please ignore, the problem is that i didn't remove the display:none :\ – Toni Michel Caubet Aug 19 '11 at 12:33
@Toni Michel Caubet: Partially my fault, I ought've included it in the example - glad you're fixed up. – Grant Thomas Aug 19 '11 at 12:37
i'm trying to make it perfect now :P http://stackoverflow.com/questions/7121706/how-can-add-aceleration-to-this-bottom-jquery-animate in case you would like to contribute! thanks a lot for your help! – Toni Michel Caubet Aug 19 '11 at 12:40

score 2 · Answer 3 · answered Aug 19 '11 at 12:14

2

Try using the slideToggle();

Maybe something like: http://jsfiddle.net/SCgdy/14/

answered Aug 19 '11 at 12:14

coxrichuk

31
2

I like this one; but the problem is that the element is {display:none} and i want to see it on document.ready... this option can fit in this requirement?? thanks!!! – Toni Michel Caubet Aug 19 '11 at 12:21
well, edited my question so you can see why slideToggle won't be valid here. if you check the image out; when it's slided first you see the bottom of the image and last thing it's show are the 'present boxes' and needs to be opposite :( – Toni Michel Caubet Aug 19 '11 at 12:28
I see. It looks like this because its being positioned to the bottom so grows from the bottom. However one way around this would be a simple piece of HTML/CSS trickery. Not the prettiest piece of code, but something like: http://jsfiddle.net/coxrichuk/q37ur/2/ – coxrichuk Aug 19 '11 at 13:06

slideUp only hides? can't show using slideUp

3 Answers3

Linked