I am putting together an animated drawer from scratch for use but also as a learning experience as I am not very strong with jQuery and would really like to get better.
I am hoping that someone here might take a moment to look over my JSFiddle and give me some direction/tips to help me continue to progress?
For example: Is what I put together clean and correct way of doing things? Is creating a function to init the elements for users who have JavaScript as I have done correct? Will what I wrote function well across browsers or are there better ways of achieving this?
$(document).ready(function() {
//Hide message if user has javascript
function initPage() {
$('#message').css('marginTop', '-60px');
$('#message').find('.droid').css('bottom', '-60px');
}
function slideMessage() {
var message = $('#message');
var tab = $('#tab');
var margin = $('#message').css('marginTop');
var speed = 300;
if (margin != "0px") {
tab.animate({top: "-90px"}, speed);
message.delay(speed).animate({marginTop: "0px"}, speed);
message.find('.droid').delay(1000).animate({bottom: "0px"}, 100);
} else {
message.find('.droid').delay(1000).css({bottom: "-60px"}, 100);
message.animate({marginTop: "-60px"}, speed);
tab.delay(speed).animate({top: "0px"}, speed);
}
}
initPage();
setTimeout(function() {
slideMessage();
}, 1000);
$('#message .close, #tab').click(function() {
slideMessage();
});
});