FrontPage97
New Member
So this demo that I found does an entire page transition. I'm trying to figure out how to apply the transition to just one DIV.
http://www.onextrapixel.com/2010/02/23/how-to-use-jquery-to-make-slick-page-transitions/
In the custom.js file I tried replacing "body" with the name of my DIV but the transition still effected the entire page.
$(document).ready(function() {
$("body").css("display", "none");
$("body").fadeIn(2000);
$("a.transition").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(1000, redirectPage);
});
function redirectPage() {
window.location = linkLocation;
}
});
And here's the relevant part of the index.html page...
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>jQuery Transitions</title>
<link rel="stylesheet" type="text/css" title="default" href="css/main.css">
<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>This Page Transitions...</h1>
<h2>Check Out The Link Below</h2>
<p>This <a href="otherPage.html" class="transition">link</a> will bring you to another page to
show you how the transition might look - although if of course looks much
better with a truly styled page</p>
</div>
</div>
</body>
</html>
http://www.onextrapixel.com/2010/02/23/how-to-use-jquery-to-make-slick-page-transitions/
In the custom.js file I tried replacing "body" with the name of my DIV but the transition still effected the entire page.
$(document).ready(function() {
$("body").css("display", "none");
$("body").fadeIn(2000);
$("a.transition").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(1000, redirectPage);
});
function redirectPage() {
window.location = linkLocation;
}
});
And here's the relevant part of the index.html page...
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>jQuery Transitions</title>
<link rel="stylesheet" type="text/css" title="default" href="css/main.css">
<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>This Page Transitions...</h1>
<h2>Check Out The Link Below</h2>
<p>This <a href="otherPage.html" class="transition">link</a> will bring you to another page to
show you how the transition might look - although if of course looks much
better with a truly styled page</p>
</div>
</div>
</body>
</html>