Page flip isn't working
I am creating a page flip action using jQuery and CSS. I have the page curl working, but the announcement behind the page curl isn't visible. Check out what I have so far...
This is in my index.html file:
<script type="text/javascript" src="jquery.js"></script>
<script开发者_运维百科 type="text/javascript">
$(document).ready(function(){
// Page Flip on hover
$("#pageflip").hover(function() {
$("#pageflip img , .msg_block").stop()
.animate({
width: '307px',
height: '319px'
}, 500);
} , function() {
$("#pageflip img").stop()
.animate({
width: '50px',
height: '52px'
}, 220);
$(".msg_block").stop()
.animate({
width: '50px',
height: '50px'
}, 200);
});
});
</script>
</head>
<body>
<div id="all">
<div id="pageflip">
<a href="#">
<img src="stylesheets/images/flip.png" alt="" />
<div class="msg_block"></div>
</div>
This is my CSS...
The flip.png image is the page curl and is working wonderfully. However, the announce.png cannot be seen anywhere.
#pageflip {
position:relative;
}
#pageflip img {
width: 50px;
height: 52px;
z-index:99;
position:absolute;
right:0;
top:0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px;
height: 50px;
position:absolute;
overflow:hidden;
right:0;
top:0;
background: url(announce.png) no-repeat right top;
}
Anyone have any ideas?
Do you have a proper <!Doctype>
on your HTML page?
background: url('announce.png') no-repeat right top;
Missing single quotes, try that?
Ok, I figured it out. It was all to do with my css code. I guess this is a good lesson to really watch your code. Sorry for all the trouble guys. I got it working now. If anyone wants to learn how to do this, I am pretty confident that after going through this much HELL with it, I know exactly what I am doing. lol
精彩评论