CODEWITHSUNDEEP
javascriptjquery
waterprism
waterprism

Reputation: 71

add slideUp and slideDown to hidden divs

I'm using the below to create a fade-in and fade-out effect on a hidden div on a FAQ page. Problem is, it makes the hidden div snap open and closed which is quite irritating. I'm not too hot on javascript and can't figure out how to get slideUp and slideDown into this, as I'd like it to also slide up and slide down. Is there any way to get a sliding function into this script? Thanks.

$(document).ready(function() {                                  
    $("a[name^='faq-']").each(function() {
        $(this).click(function() {
            if( $("#" + this.name).is(':hidden') ) {
                $("#" + this.name).fadeIn('slow');
            } else {
                $("#" + this.name).fadeOut('slow');
            }           
            return false;
        });
    });
});

Upvotes: 0

Views: 775

Answers (2)

guyroutledge
guyroutledge

Reputation: 23

If you want to use fading rather than slideUp/slideDown, you can use fadeTo(duration, opacity) which will not make stuff jump as the space for the element is maintained.

If you want a plugin to combine slide and fade, maybe check out this: http://css-tricks.com/snippets/jquery/combine-slide-and-fade-functions/

Upvotes: 1

John Strickler
John Strickler

Reputation: 25421

You can fix this with a small CSS tweak by using visibility: hidden to hide the divs instead of display:none. This will reserve the space for the DIVs you are fading in & out.

You want to slide & fade at the same time? Try using .animate() to set opacity to 0/1 and use height to max/0.

Upvotes: 1

Related Questions