Sunday, 15 September 2013

css - How can I get a div set to visibility:hidden to display using jQuery? -



css - How can I get a div set to visibility:hidden to display using jQuery? -

i have div set visibility: hidden in css want display later. here jquery have far, isn't working:

$(document).ready(function() { $('#start').click(function() { $(this).fadeout(1000, function() { $('body').css('background-color','#999', function() { $('.menu').fadeto('slow',1); }); }); }); });

the next should happen in order:

user clicks '#start' , '#start' fades. (this happens.) the background color of page turns original color gray. (this happens.) the div '.menu' should fade in. (this not happen.)

what doing wrong? if makes difference, '.menu' filled bunch of kid divs.

fadeto changes opacity property of element, should utilize opacity instead of visibility or set display property of element none , utilize fadein method.

also note css doesn't take 3 parameters.

.menu { display: none }

$(document).ready(function() { $('#start').click(function() { $(this).fadeout(1000, function() { $('body').css('background-color','#999'); $('.menu').fadein('slow'); }); }); });

however, if want alter visibility property, can utilize css method:

$('.menu').css('visibility', 'visible');

jquery css animation html fadeto

No comments:

Post a Comment