CODEWITHSUNDEEP
jqueryhtmlcss
TTomu
TTomu

Reputation: 99

slide (animation) not working

I have a page with small buttons (more then just only 2) for profiles. All is working more or less fine, except hide and show (slideToggle) - my div (profilePannel) appears without nice slow expand, just suddently.

Only css element (margin-bottom) is working fine. To see it, you may click profile one, then see on the second button, final effect.

jQuery

var menu;
$(document).ready(function(){
    $('.img').click(function () {
        menu = $("#" + $(this).data("menu"));
        $(".profilePannel:not(#" + menu.attr("id") + ")").slideUp("slow");
        menu.slideToggle("slow");
    });
})

Try it!

Can anyone be so nice and tell me why, and how I can change it?

And BTW, I have a trouble with positioning my profilePanel - I wish to show it just under each profile button, without moving rest of buttons. I have tried with position: relative, absolute, also with z-index but I have missed something and dont have the output that I wish.

Upvotes: 3

Views: 1622

Answers (2)

George
George

Reputation: 36794

It seems to be your min-height causing you issues. If you remove/change that, you get the effect you are going for:

.profilePannel {
    width: 300px;
    height: 150px;
    border: 1px solid #000;
    background: silver;
    filter:alpha(opacity=75);
    opacity: 0.75;
    -moz-opacity:0.75;
    position: relative;
    z-index: 2;
    display: none;
    margin-bottom: 15px;
}

Also, you can better write

$(".profilePannel:not(#" + menu.attr("id") + ")").slideUp("slow");

As:

$(".profilePannel").not(menu).slideUp("slow");

JSFiddle

If you really want to use min-height you'd need to come up with an alternative - or just put it in a container and set the min-height on that:

JSFiddle

Upvotes: 1

JAYBEkster
JAYBEkster

Reputation: 790

Here all is correctly working including absolute po Try this out

JavaScript code:

var menu;
$(document).ready(function(){
    $('.profilePannel').each(function(obj){
        $(this).height( $(this).height() );
        $(this).css('min-height', 0);
    })

    $('.img').click(function () {
            menu = $("#" + $(this).data("menu"));

            menu.slideDown().siblings('.profilePannel').slideUp();


        });

})

Upvotes: 0

Related Questions