jQuery DIV only transistion

F

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>
 
ronaldroe

ronaldroe

Super Moderator
Staff member
Well, it just looks the same, because the 2 divs you have encompass the entire page. What effect, exactly are you looking for?
 
notarypublic

notarypublic

New Member
I'm commenting this code so you can see a few things it's doing:

Code: 
$(document).ready(function() {

//this changes the CSS (after) the page loads. If this is a larger/slower-loading page, they're going to see the page "blink" from visible to invisible, which is a nasty transition. Set this in the CSS instead.
$("body").css("display", "none");

/*This is using a jQuery selector to select an element and then fade it in. The general format is as follows:

$("______an element you want to select here_____").nameOfFunctionToRunHere("_____any arguments to pass to that function here____");

So in this case, "Select the 'body' element, and then fade that bad boy in over 2000 milliseconds."*/
$("body").fadeIn(2000);

$("a.transition").click(function(event){
event.preventDefault();
linkLocation = this.href;

/* 
This is fading the 'body' element out, and then running the 'redirectPage' function.
*/
$("body").fadeOut(1000, redirectPage);
});

function redirectPage() {
/*****
Now this is what's causing your problem. When window.location is changed, it forces the browser to navigate to the new page. So if window.location = "www.google.com", your browser will redirect to google when you click that link.
******/
window.location = linkLocation;
}

});

Now this is probably what you want:
Link here

I put it in a jsFiddle to keep it brief on here.

Best of luck!
 
chrishirst

chrishirst

Well-Known Member
Staff member
http://www.welovecss.org/jsfade/

A very simple javascript fade done in less than 70 lines of code (lncluding white space) and no code bloat of a 'framework'.

HTML: 
</html>
</head>
<script type="text/javascript">

	var fadeInId = 0;
	var fadeOutId = 0;
	var opac = 0;
	var e = null;
	
function fadeIn() {
	if(opac < 1) {
  		opac += 0.01;
	} else {
		clearInterval(fadeInId);
		fadeOutId = setInterval("fadeOut()", 100);
		e.innerHTML = "Fade Out";
	}
	e.style.opacity = opac;
	e.style.mozOpacity = opac*100 +'%';
	if(e.filters) {
		e.filters.alpha.opacity=opac*100;
	}
//	ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=opac*100)";
}
function fadeOut() {
	if(opac > 0) {
  		opac -= 0.01;
	} else {
		clearInterval(fadeOutId);
		fadeInId = setInterval("fadeIn()", 100);
		e.innerHTML = "Fade In";
	}
	e.style.opacity = opac;
	e.style.mozOpacity = opac*100 +'%';
	if(e.filters) {
		e.filters.alpha.opacity=opac*100;
	}
//	ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=opac*100)";
}


function fadeInit(eID) {
	e = document.getElementById(eID);
	fadeInId = setInterval("fadeIn()", 100);
}

</script>
<style type="text/css">
#fading {
	background-color:green;
	color:black;
	tont-weight: bold;
	width:300px;
	padding:10px 5px;
	opacity:0.1;
	text-align:center;
	-moz-opacity:0%;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";	
	filter: alpha(opacity=0);
}
</style>
</head>
<body>

<div id="fading">Fade in</div>
<script type="text/javascript">fadeInit("fading");</script>
</body>
</html>

I didn't see the point of bothering with a DTD or external js & CSS for something so simple.
 
notarypublic

notarypublic

New Member
chrishirst said:
I didn't see the point of bothering with a DTD or external js & CSS for something so simple.
Click to expand...
Bit of a devil's advocate, but if they have jQuery cached then it may load faster (hypothetically, in this case i don't know if the difference is relevant). Also, he may revisit the project with higher aspirations later - in which case, he may need the additional functionality that jQuery would provide. But it's nice to know how to do it yourself ;)
 
F

FrontPage97

New Member
I figured out how to do it. Just had to change to the name "container" (my DIV) in 3 places. Done!

$(document).ready(function() {

$(".container").css("display", "none");

$(".container").fadeIn(2000);

$("a.transition").click(function(event){
event.preventDefault();
linkLocation = this.href;
$(".container").fadeOut(1000, redirectPage);
});

function redirectPage() {
window.location = linkLocation;
}

});
 
You must log in or register to reply here.
Top