I happened to work on Fade-In and Fade-Out effect using dojo. This functionality was very important for our project.
Below is the block codes which giving a sneak peak of my code.
Fade-In and Fade-Out effect
Block Code One
var idTrack = document.getElementById("#{id:idTrack}").innerHTML;
idTrack = parseInt(idTrack);
idNextTrack = parseInt(idTrack) - 1;
if(idNextTrack == 1){
document.getElementById("backButton").style.display = 'none';
}
var totalIdTrack = document.getElementById("#{id:totalText}").innerHTML;
if(idNextTrack < totalIdTrack){
document.getElementById("frontButton").style.display = 'block';
document.getElementById("accptButton").style.display = 'none';
}
var fadeOut = dojo.fadeOut({
node: "did" + parseInt(idTrack),
duration: 750,
onEnd: function() {
document.getElementById("did" + parseInt(idTrack)).style.display = 'none';
document.getElementById("did" + parseInt(idNextTrack)).style.display = 'block';
dojo.fadeIn({node: "did" + parseInt(idNextTrack),duration: 1000}).play();
document.getElementById("#{id:idTrack}").innerHTML = parseInt(idTrack) - 1;
}
});
fadeOut.play();
________________________________________________________________________________________________
Block Code 2
var idTrack = document.getElementById("#{id:idTrack}").innerHTML;
var totalIdTrack = document.getElementById("#{id:totalText}").innerHTML;
var loginID = document.getElementById("#{id:loginID}").innerHTML;
idTrack = parseInt(idTrack);
if(idTrack > 0){
document.getElementById("backButton").style.display = 'block';
}
idNextTrack = parseInt(idTrack) + 1;
var fadeOut = dojo.fadeOut({
node: "did" + parseInt(idTrack),
duration: 1000,
onEnd: function() {
document.getElementById("did" + parseInt(idTrack)).style.display = 'none';
document.getElementById("did" + parseInt(idNextTrack)).style.display = 'block';
dojo.fadeIn({node: "did" + parseInt(idNextTrack),duration: 1000}).play();
document.getElementById("#{id:idTrack}").innerHTML = parseInt(idTrack) + 1;
if(idNextTrack == totalIdTrack){
document.getElementById("frontButton").style.display = 'none';
if(loginID == "policyadmin"){
document.getElementById("accptButton").style.display = 'none';
}else{
document.getElementById("accptButton").style.display = 'block';
}
}
}
});
fadeOut.play();
Below is the block codes which giving a sneak peak of my code.
Fade-In and Fade-Out effect
Block Code One
var idTrack = document.getElementById("#{id:idTrack}").innerHTML;
idTrack = parseInt(idTrack);
idNextTrack = parseInt(idTrack) - 1;
if(idNextTrack == 1){
document.getElementById("backButton").style.display = 'none';
}
var totalIdTrack = document.getElementById("#{id:totalText}").innerHTML;
if(idNextTrack < totalIdTrack){
document.getElementById("frontButton").style.display = 'block';
document.getElementById("accptButton").style.display = 'none';
}
var fadeOut = dojo.fadeOut({
node: "did" + parseInt(idTrack),
duration: 750,
onEnd: function() {
document.getElementById("did" + parseInt(idTrack)).style.display = 'none';
document.getElementById("did" + parseInt(idNextTrack)).style.display = 'block';
dojo.fadeIn({node: "did" + parseInt(idNextTrack),duration: 1000}).play();
document.getElementById("#{id:idTrack}").innerHTML = parseInt(idTrack) - 1;
}
});
fadeOut.play();
________________________________________________________________________________________________
Block Code 2
var idTrack = document.getElementById("#{id:idTrack}").innerHTML;
var totalIdTrack = document.getElementById("#{id:totalText}").innerHTML;
var loginID = document.getElementById("#{id:loginID}").innerHTML;
idTrack = parseInt(idTrack);
if(idTrack > 0){
document.getElementById("backButton").style.display = 'block';
}
idNextTrack = parseInt(idTrack) + 1;
var fadeOut = dojo.fadeOut({
node: "did" + parseInt(idTrack),
duration: 1000,
onEnd: function() {
document.getElementById("did" + parseInt(idTrack)).style.display = 'none';
document.getElementById("did" + parseInt(idNextTrack)).style.display = 'block';
dojo.fadeIn({node: "did" + parseInt(idNextTrack),duration: 1000}).play();
document.getElementById("#{id:idTrack}").innerHTML = parseInt(idTrack) + 1;
if(idNextTrack == totalIdTrack){
document.getElementById("frontButton").style.display = 'none';
if(loginID == "policyadmin"){
document.getElementById("accptButton").style.display = 'none';
}else{
document.getElementById("accptButton").style.display = 'block';
}
}
}
});
fadeOut.play();