I already discussed animated the Div layer and faded effect using jQuery in previous posts. How about combine both fading effect with the animation effect? Let’s try to see what the effects will be.
jQuery Sliding Div and Fading Effect at the Same Time
You should noticed that both sliding animation effect and fading effect were performed at the same time.
The jQuery codes and HTML file of the above animation is:
<title>Slide Div Layer and Fade Effect At the Same Time</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$("document").ready(function() {
// Get the outer height of #picture Div
var widthShift = $("#picture").outerWidth();
// Fade out the contents ready for fade in effect
$("#pageContent").fadeOut(500);
$(".slideRight").click(function() {
// Fade in the contents
$("#pageContent").fadeIn(5000);
if ( $(this).is(".slideRight") ) {
// Move the curtain to the right by the outer width of #picture Div layer
// in 5 seconds when the button is clicked.
$("#picture").animate({ "left": "+=" + widthShift + "px" }, 5000);
// Toggle the class
$(this).toggleClass("slideRight slideLeft")
} else {
// Fade out the contents while sliding Div to left
$("#pageContent").fadeOut(3000);
// Move the curtain to the left by the outer width of #picture Div layer
// in 3seconds when the button is clicked.
$("#picture").animate({ "left": "-=" + widthShift + "px" }, 3000);
// Toggle the class
$(this).toggleClass("slideRight slideLeft")
}
});
});
</script>
</head>
<body>
<h1>jQuery Animate Div and Fading At the Same Time</h1>
<div id="frame">
<div id="pageContent"></div>
<div id="picture"></div>
</div>
<div style="width:282px; text-align: center; margin-bottom:10px;">
<input type="button" value="Click Here Animate Curtain to Left/Right" />
</div>
<div style="width:282px; text-align: center"></div>
</body>
</html>
How about the fading effect starts after the sliding Div is finished?
jQuery Fading Effect after Sliding Div Finished
I only modify the above jQuery codes a little bit to get the different effect.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Fade Effect after Slide Div Layer Finished</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$("document").ready(function() {
// Get the outer height of #picture Div
var widthShift = $("#picture").outerWidth();
// Fade out the contents ready for fade in effect
$("#pageContent").fadeOut(500);
$(".slideRight").click(function() {
if ( $(this).is(".slideRight") ) {
// Move the curtain to the right by the outer width of #picture Div layer
// in 5 seconds when the button is clicked.
$("#picture").animate({ "left": "+=" + widthShift + "px" }, 5000,
function() {
// Fade in the contents after sliding finished
$("#pageContent").fadeIn(5000);
}
);
// Toggle the class
$(this).toggleClass("slideRight slideLeft")
} else {
// Fade out the contents while sliding Div to left
$("#pageContent").fadeOut(3000);
// Move the curtain to the left by the outer width of #picture Div layer
// in 3seconds when the button is clicked.
$("#picture").animate({ "left": "-=" + widthShift + "px" }, 3000);
// Toggle the class
$(this).toggleClass("slideRight slideLeft")
}
});
});
</script>
</head>
<body>
<h1>jQuery Fading Effect After Silde Div Finished</h1>
<div id="frame">
<div id="pageContent"></div>
<div id="picture"></div>
</div>
<div style="width:282px; text-align: center; margin-bottom:10px;">
<input type="button" value="Click Here Animate Curtain to Left/Right" />
</div>
<div style="width:282px; text-align: center"></div>
</body>
</html>
By modifying the codes, the fading effect will be started after the sliding animation is finished:
$("#picture").animate({ "left": "+=" + widthShift + "px" }, 5000,
function() {
// Fade in the contents after sliding finished
$("#pageContent").fadeIn(5000);
}
);
Hope you enjoy this jQuery sliding Div animation and fading effect.
Leave a Reply