How to slide down a div then .fadeIn() the content and vice versa?

Question

Goal

When a user clicks the button, the div in question will:

1. slide down
2. stop
3. fade in the content

When the user clicks the button again, the div will:

1. fade out
2. stop
3. slide up

Current position

Here is an example where the fadeIn and fadeOut is happening at the right time but there is no slide effect before and after the fadeIn and fadeOut respectively
http://jsfiddle.net/tkRGU/1/

Also there is this option which has the slideToggle function but does not have the fadeIn and fadeOut occuring after and before the slide respectively.
http://jsfiddle.net/MY8DD/7/

Eductive

if the users can't see the div when it slides down, why does it need to slide down at all? Why not just fade it in and out? Is it shifting other page content up/down? – Belen

jacobangel correct, it is shifting other page content up and down – Eductive

Answer 1

This will work:

HTML:

<a href="#" onclick="toggleSlider();">toggle</a>
<div id="panelThatSlides" style="display:none;background:#eee;padding:10px;">
    <div id="contentThatFades" style="opacity:0;filter:alpha(opacity=0);">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut tortor  erat, et consectetur nisl. Nunc non placerat odio. Cras feugiat  pulvinar diam sed sollicitudin. Quisque ut elit lacus, et gravida nunc.  Maecenas ac enim ligula. Aenean felis nunc, vulputate pellentesque  vehicula nec, tristique a tortor. Curabitur et semper dui. Sed id nisl  turpis. Sed vel nunc et nisi laoreet feugiat. Sed lobortis enim sed arcu  tempor vehicula. Vivamus dui ligula, ultricies id egestas ut, rhoncus  et est. Pellentesque dignissim diam vel nibh tempus condimentum. Etiam  sodales fermentum pharetra. Etiam faucibus tempus malesuada. Mauris  nulla lectus, laoreet sit amet cursus vel, ultricies at enim. Sed  facilisis rutrum eros, nec malesuada eros iaculis ac.
        <br /><br />
        In consectetur faucibus fermentum. Pellentesque habitant morbi tristique  senectus et netus et malesuada fames ac turpis egestas. Cras nunc  magna, vestibulum eget pulvinar hendrerit, tincidunt id arcu. Nullam  dolor ligula, suscipit placerat condimentum ac, feugiat ut mauris.  Suspendisse semper dolor condimentum dui ornare rhoncus. In bibendum  massa vel erat tristique congue. Donec vel mi quam, ac iaculis odio.  Nulla interdum orci quis ligula aliquam viverra. Nam eget egestas  mauris. Sed in massa quis erat venenatis aliquam.
    </div>
</div>

Javascript:

function toggleSlider() {
    if ($("#panelThatSlides").is(":visible")) {
        $("#contentThatFades").animate(
            {
                opacity: "0"
            },
            600,
            function(){
                $("#panelThatSlides").slideUp();
            }
        );
    }
    else {
        $("#panelThatSlides").slideDown(600, function(){
            $("#contentThatFades").animate(
                {
                    opacity: "1"
                },
                600
            );
        });
    }   
}

Working example on JS Fiddle.

For IE just make sure there is a background color behind the content for cleartype.

Cheddar

I tried that script with onmouseover and onmouseout triggers but it's not works properly. Sometimes div is fade in and out immediately when onmouseover triggered. Than toggle starts to fail, div fades in while onmouseout triggered etc. May I have your suggestions? – Romaic

Answer 2

It sounds like since you want the two operations to occur simultaneously that you should use the animate function. Otherwise the actions will come one after another.

If you know the height of the element before running it, then you can set things fairly easily. Here's an extremely rough example: http://jsfiddle.net/tArQu/

Belen

jacobangel, sorry I should have been clearer in my goal. i have updated my question will a clearer explanation of my goal but in brief, when the button is clicked, the slide happens first, after the slide is complete there is a stop, then the fade in of the content happens. – Eductive

Do you know the height of the box? If you do, just wrap the content with another div. Expand the div first, then fade in the wrapped content. If you don't know the best you can do is guess like this: jsfiddle.net/MY8DD/35 – Belen

Answer 3

$("#button").toggle(function(){
    $("#content").slideDown().fadeIn();
    }, function(){
    $("#content").slideUp().fadeOut();
    return false;
});    

That what you're after?

Circumbendibus

Wouldn't the extra fadeIn/Out do nothing since the slideDown/Up already reveals/hides the content? – Belen

jacobangel is right, this does not work. it is equivalent to using .slideToggle(). the .fadeIn() and .fadeOut() do nothing :( – Eductive

Answer 4

If you don't know the height of the element in advance, it is slightly more complicated. You have to animate the opacity directly to fade, and you must hide the content with CSS visibility while it is "sliding".

CSS visibility "hidden" allows content to occupy the space in the document it normally would, but to be hidden from view; CSS display "none" doesn't just hide the element, it removes it from the document flow. By hiding the element using visibility, we can slide it down until it is its full height, while the content of the element remains invisible.

Similarly, fading content in using jQuery's fadeIn function assumes an element is initially hidden with display "none", so it won't work if we use visibility. Instead, we make the element initially fully transparent (opacity 0.0); once the sliding animation is complete, we set visibility to "visible" and then animate the opacity from fully transparent to fully opaque (0.0 to 1.0).

Assuming the element is initially hidden (CSS display "none" or jQuery hide function):

$(element).css("visibility", "hidden").slideDown("slow", function() {
    $(this).css("opacity", 0.0).css("visibility", "visible").animate({
        "opacity": 1.0
    }, "slow");
});

N.B.: Be extra careful typing "visibility" and "visible" as they are easily misspelled -- the source of many frustrating bugs.

You don't HAVE to use visibility, as you can accomplish the same thing by making the content initially transparent, but using it makes it more explicit what is going on. That is, this also works:

$(element).css("opacity", 0.0).slideDown("slow", function() {
    $(this).animate({
        "opacity": 1.0
    }, "slow");
});

Whitechapel

Answer 5

Give this a shot: http://jsfiddle.net/solidsource/67XZX/

Cheddar

hey that looks pretty good except how else can I call this function besides using an <a> tag? I am thinking something more like $('button').click(function(slideToggler)) but I am sure I got it wrong there. – Eductive

actually that doesn't work, it just slides the 20px of padding, the actual content just abruptly pops in – Eductive