I wanted to dive into jQuery and decided to recreate the slick animation from Jay-Z's new album commercials. In these ads, a bar slides left over his name while simultaneously disappearing. I also wanted to add a flashing effect by fading out, fading in, and then fading out the text before it disappeared completely. Can anyone assist me with this? I've managed to set up the layout but can't seem to get the jQuery functions working correctly.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Magna Carta</title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#bar').delay(800).css('padding-left', 0+'px');
$('#main p').fadeOut('slow' function(){
$('#main p').fadeIn('slow' function(){
$('#main p').fadeOut('slow');
});
});
});
</script>
<style type="text/css">
body {
background-color:#f2f2f2;
margin:0px;
padding:0px;
}
#main {
width:300px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin:-150px 0 0 -150px;
text-align:center;
}
#main p {
font-family:Admisi Display SSi;
font-size:64px;
}
#bar {
padding-left:180px;
height:25px;
background-color:black;
position:absolute;
z-index:2;
margin-top:87px;
margin-left:61px;
}
</style>
</head>
<body>
<div id="main">
<center>
<div id="bar"></div>
</center>
<p>JAY-Z</p>
</div>
</body>
</html>