Jquery animation on hover
I'm very new to jquery and I've been trying to achieve something like this
http://jsfiddle.net/rniestroj/nZhbg/ but it doesn't seem to be working on
my code. I don't understand if i have the jquery part wrong?
Here is what i have:
In the code, the second part of the jquary with img0...etc is the fade in
and out of my header.
index.php
<html>
<head>
<link rel="stylesheet" href="css/style2.css" type="text/css">
</head>
<body>
<!-- JQuery script for fade in and fade out of the whole page-->
<script>
$(".circle1").hover(
function(){
$(".circle1info").animate({left: '+=1000',bottom: '+=1000'}, 1750);
},
function(){
$(".circle1info").animate({left: '-=1000',bottom: '-=1000'}, 1750);
});
$( "#img0" ).delay(1000).fadeIn(3000, function() {
$( "#img1" ).fadeIn(3000, function() {
$( "#img2" ).fadeIn(3000, function() {
$( "#img3" ).fadeIn(3000, function() {
$( "#img4" ).fadeIn(3000, function() {
$( "#rightpanel" ).fadeIn(500, function() {
$( "#leftpanel" ).fadeIn(500, function() {
});
});
});
});
});
});
return false;
});
</script>
<img class="smdmascot" src="/images/fade/samplemd_mascot.png"><br>
<img class="circle4" src="/images/fade/circle4.png"><br>
<img class="circle3" src="/images/fade/circle3.png"><br>
<img class="circle2" src="/images/fade/circle2.png"><br>
<img class="circle1" src="/images/fade/circle1.png"><br>
<img class="circle1info" src="/images/fade/coupon_slider.png">
</body>
</html>
css: (i took some of the img0...etc stuff out so its easier to look at)
a:link { color: #FFFFFF; }
a:visited { color: #FFFFFF; }
a:hover { color: #000000; }
a:active { color: #FFFFFF; }
.maindiv {
position: absolute;
}
.circle1 {
position: absolute;
z-index: 5;
left: 545px;
top: 715px;
}
.circle1info {
position: absolute;
z-index: -5;
left: 545px;
top: 715px;
}
.circle2 {
position: absolute;
z-index: 4;
left: 579px;
top: 600px;
}
.circle3 {
position: absolute;
z-index: 3;
left: 597px;
top: 515px;
}
.circle4 {
position: absolute;
z-index: 2;
left: 618px;
top: 450px;
}
.smdmascot {
position: absolute;
z-index: 1;
left: 580px;
top: 320px;
}
</style>
I greatly appreciate any help.
No comments:
Post a Comment