Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

css not displaying after .animate has run

css not displaying after .animate has run

Problem

ok so I have this, I have the css set to display none but when the .animate runs I want it to then display inline a list, can anyone help point out whats wrong ? Thanks Tim

    $('.settings-button').click(
        function () {
            $('.settings-box').animate({ height: 150 }, 750, function () {

                $('.Settings-list').css({
                    'Display': 'inline',
                });
            });
        }
    );
Problem courtesy of: user3894984

Solution

The only reason this isnt working is because your not auto hiding the div tag when loading with

 $('.Settings-list').hide()

as show above, in other comments.

along with the case with css is sensitive 'display' not 'Display'

after that what you have is perfectly fine.

full code

   $('.Settings-list').hide()
        $('.settings-button').click(
            function () {
                $('.settings-box').animate({ height: 150 }, 750, function () {
                    $('.Settings-list').css({
                        'display': 'inline',                        
                    });
                });
            }
        );

Thanks Alan

Solution courtesy of: AlanMorton2.0

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

css not displaying after .animate has run

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×