My problem is that only fadeOut works but not fadeIn. I don't use CSS or jQuery for it. And how can I make my code more effective.
The code:
HTML:
<div class="circle"id="circle1"onclick="myFunction()"></div>
<div class="circle"id="circle2" style="visibility:visible" ></div
JavaScript:
function myFunction() {
var element = document.getElementById("circle2");
if (element.style.visibility === "visible") {
var op = 1;
var timer = setInterval(frame, 100)
function frame() {
if (op <= 0.1) {
clearInterval(timer);
element.style.visibility = "hidden";
}
element.style.opacity = op;
op -= op * 0.1;
}
} else {
var op = 0;
var timer = setInterval(frame, 10)
function frame() {
if (op >= 0.95) {
clearInterval(timer);
element.style.visibility = "visible";
}
element.style.opacity = op;
op += op * 0.1;
}
}
}
There are a few reasons this is not working.
0 * anything is still 0 so var op=0; and op += op * 0.1 will always be zero.
It is set to hidden not visible while transitioning to fully visible.
I played around with it to make it work but I refactored you code to fit my style while I did it. This is what I came up with.
function myFunction() {
var element = document.getElementById( "circle2" );
var op;
var timer;
if ( element.style.visibility === "visible" ) {
op = 1;
timer = setInterval( fadeOut, 100 )
} else {
op = 0.1;
timer = setInterval( fadeIn, 100 )
}
function fadeOut() {
if ( op <= 0.1 ) {
clearInterval( timer );
element.style.visibility = "hidden";
}
element.style.opacity = op;
op -= op * 0.1;
}
function fadeIn() {
element.style.visibility = "visible";
if ( op >= 0.95 ) {
clearInterval( timer );
}
element.style.opacity = op;
op += op * 0.1;
}
}
<div class="circle"id="circle1"onclick="myFunction()">hello</div>
<div class="circle"id="circle2" style="visibility:visible" >Test</div>
Related
Can this jQuery window load script be converted into pure javascript?
I was wrong, I didn't dive into pure javascript before learning about jQuery.
can you i convert this jquery to pure javascript?
This is my code
$(window).load(function () {
$("#loading").fadeOut("fast");
});
$(window).on("beforeunload", function () {
$("#loading").fadeIn("fast").delay(1000).show();
});
The load function can be replaced with onload (scrapping the window because onload is already a global variable) and the $ jquery query selector function is the same as document.querySelector. The on function is equivalent to the addEventListener function.
The pure js code is
onload = function () {
const elem = document.querySelector("#loading");
var opacity = 1;
var timer = setInterval(() => {
opacity -= 50 / 400;
if( opacity <= 0 )
{
clearInterval(timer);
opacity = 0;
elem.style.display = "none";
elem.style.visibility = "hidden";
}
elem.style.opacity = opacity;
elem.style.filter = "alpha(opacity=" + opacity * 100 + ")";
}, 50); // this part is from https://stackoverflow.com/questions/13733912/javascript-fade-in-fade-out-without-jquery-and-css3
};
addEventListener("beforeunload", function () {
const elem = document.querySelector("#loading");
elem.style.opacity = 0;
elem.style.filter = "alpha(opacity=0)";
elem.style.display = "inline-block";
elem.style.visibility = "visible";
var opacity = 0;
var timer = setInterval( function() {
opacity += 50 / 400;
if( opacity >= 1 )
{
clearInterval(timer);
opacity = 1;
}
elem.style.opacity = opacity;
elem.style.filter = "alpha(opacity=" + opacity * 100 + ")";
}, 50 ); // this part is also from https://stackoverflow.com/questions/13733912/javascript-fade-in-fade-out-without-jquery-and-css3
setTimeout(()=>{elem.style.display="block";},1000);
});
this all should match up to what jquery would do but something could always go wrong.
I need to make it so that the event here removes the element after it fades out but how would I do that? I got it so that the element fades out from a grid that I am using but I want it to be removed completely as well.
function fadeOut(event){
var op = 1; // initial opacity
var timer = setInterval(function () {
if (op <= 0.1){
clearInterval(timer);
}
event.style.opacity = op;
op -= 0.1;
}, 50);
}
You just need to .remove() it, but you'd want the interval to go for 50 more ms so that there's time for the element to be visible at 0.1 opacity, else it might look a bit off:
function fadeOut(event){
var op = 1; // initial opacity
var timer = setInterval(function () {
if (!op){
clearInterval(timer);
event.remove();
}
event.style.opacity = op;
op -= 0.1;
}, 50);
}
see this article
you can use
elementID.parentNode.removeChild(elementID);
You are catching the event here. Thats means you can get the target. You can use ev.target.remove() to remove it. Hope its work for you.
function fadeOut(event){
var op = 1; // initial opacity
var timer = setInterval(function () {
if (op <= 0.1){
clearInterval(timer);
event.target.remove();
}
event.style.opacity = op;
op -= 0.1;
}, 50);
}
Im working on a site where I created a small slide show of images. The images fadeIn and fadeOut okay along with their captions, but sometimes when it reaches the last image it goes full blank white before showing first image again. Also i added two buttons at bottom to navigate the images and they work as well but when I sometimes use them the images flicker in between transitions and the slide show speeds up and it just gets confusing. Please let me know what to change in my JS code.
var imageDisplayer=0;
//*******IMAGE CAPTION FOR SLIDE SHOW
var imageCaption=[
"Test for image 1..",
"Test for image 2.",
"Test for image 3."
];
function slideShow(){
var imagePointer=document.getElementsByClassName("indexSlideShow");
var captionPointer=document.getElementById("imageCaption");
for(var i=0;i<imagePointer.length;i++ )
{
fadeOut( imagePointer[imageDisplayer]);
}
imageDisplayer++;
if (imageDisplayer >= imagePointer.length)
{
imageDisplayer = 0;
}
fadeIn( imagePointer[imageDisplayer]);
captionPointer.innerHTML=imageCaption[imageDisplayer];
setTimeout(slideShow, 9000);
}
slideShow();
function buttonSlideShowPrevious(){
var imagePointer=document.getElementsByClassName("indexSlideShow");
var captionPointer=document.getElementById("imageCaption");
fadeOut( imagePointer[imageDisplayer]);
imageDisplayer=imageDisplayer-1;
fadeIn( imagePointer[imageDisplayer]);
captionPointer.innerHTML=imageCaption[imageDisplayer];
// setTimeout(slideShow, 9000);
}
function buttonSlideShowNext(){
var imagePointer=document.getElementsByClassName("indexSlideShow");
var captionPointer=document.getElementById("imageCaption");
fadeOut( imagePointer[imageDisplayer]);
imageDisplayer=imageDisplayer+1;
fadeIn( imagePointer[imageDisplayer]);
captionPointer.innerHTML=imageCaption[imageDisplayer];
// setTimeout(slideShow, 9000);
}
function fadeOut(element) {
var op = 1; // initial opacity
var timer = setInterval(function () {
if (op <= 0.1){
clearInterval(timer);
element.style.display = 'none';
}
element.style.opacity = op;
// element.style.filter = 'alpha(opacity=' + op * 100 + ")";
op -= op * 0.025;
}, 10);
}
function fadeIn(element) {
var op = 0.1; // initial opacity
element.style.display = 'block';
var timer = setInterval(function () {
if (op >= 1){
clearInterval(timer);
}
element.style.opacity = op;
// element.style.filter = 'alpha(opacity=' + op * 100 + ")";
op += op * 0.025;
}, 10);
}
function animateValue(id, start, end, duration) {
var range = end - start;
var current = start;
var increment = end > start? 1 : -1;
var stepTime = Math.abs(Math.floor(duration / range));
var obj = document.getElementById(id);
var timer = setInterval(function() {
current += increment;
obj.innerHTML = current;
if (current == end) {
clearInterval(timer);
}
}, stepTime);
}
animateValue("num1", 0, 75, 10000);
var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
if(scrollTop > 400){
animateValue("num2", 0, 75, 10000);
}
.box{
height:500px;
}
<h1 id="num1">75</h1>
<div class="box"></div>
<h1 id="num2">75</h1>
I need to run the number from 0 to 75 on id="num2", like id="num1" is working. But I need id="num2" running after page is scrolled down there. And its a challenge because I can't use any library like Jquery, angular JS etc. I need it using pure JavaScript.
I added some events for scrolling and resizing (both can "show" the target element). We don't need the scrolling position when using .getBoundingClientRect(), because it shows us the targets top position depending on the scroll position.
https://jsfiddle.net/q8ww67tj/
function animateValue(id, start, end, duration) {
var range = end - start;
var current = start;
var increment = end > start? 1 : -1;
var stepTime = Math.abs(Math.floor(duration / range));
var obj = document.getElementById(id);
var timer = setInterval(function() {
current += increment;
obj.innerHTML = current;
if (current == end) {
clearInterval(timer);
}
}, stepTime);
}
animateValue("num1", 0, 75, 10000);
triggered = false;
window.addEventListener('load', recalculate);
window.addEventListener('scroll', recalculate);
window.addEventListener('resize', recalculate);
function recalculate() {
var height = document.body.clientHeight,
targetRect = document.getElementById('num2').getBoundingClientRect();
targetY = targetRect['top'],
targetHeight = targetRect['height'];
if (targetY + targetHeight < height) {
if (!triggered) {
triggered = true;
animateValue("num2", 0, 75, 10000);
}
}
}
.box {
height: 1000px;
}
<h1 id="num1">75</h1>
<div class="box"></div>
<h1 id="num2">75</h1>
I am doing a small javascript animation. this is my code :
window.onload = function () {
var heading = document.getElementsByTagName('h1')[0];
heading.onclick = function () {
var divHeight = 250;
var speed = 10;
var myInterval = 0;
alert(divHeight);
slide();
function slide() {
if (divHeight == 250) {
myInterval = setInterval(slideUp, 30);
} else {
myInterval = setInterval(slideDwn, 30);
alert('i am called as slide down')
}
}
function slideUp() {
var anima = document.getElementById('anima');
if (divHeight <= 0) {
divHeight = 0;
anima.style.height = '0px';
clearInterval(myInterval);
} else {
divHeight -= speed;
if (divHeight < 0) divHeight = 0;
anima.style.height = divHeight + 'px';
}
}
function slideDwn() {
var anima = document.getElementById('anima');
if (divHeight >= 250) {
divHeight = 250;
clearInterval(myInterval);
} else {
divHeight += speed;
anima.style.height = divHeight + 'px';
}
}
}
}
i am using above code for simple animation. i need to get the result 250 on the first click, as well second click i has to get 0 value. but it showing the 250 with unchanged. but i am assigning the value to set '0', once the div height reached to '0'.
what is the issue with my code? any one help me?
Everytime you click on the div the divHeight variable is reset to 250, thus your code never calls slideDwn. Moving the divHeight declaration outside the event handler should do the trick.
Also, your div wont have the correct size when any of the 2 animations end. You're setting the divHeight variable to 250 or 0 correctly, but never actually setting anima.style.height after that.
I've rewritten your code into something simpler and lighter. The main difference here is that we're using a single slide() function here, and that the height of the div in question is stored in a variable beforehand to ensure that the element slides into the correct position.
Note that this is a very simplistic implementation and assumes that the div carries no padding. (The code uses ele.clientHeight and ele.style.height interchangeably, which admittedly, is a pretty bad choice, but is done here to keep the code simple)
var heading = document.getElementsByTagName('h1')[0],
anima = document.getElementById('anima'),
divHeight = anima.clientHeight,
speed = 10,
myInterval = 0,
animating = false;
function slide(speed, goal) {
if(Math.abs(anima.clientHeight - goal) <= speed){
anima.style.height = goal + 'px';
animating = false;
clearInterval(myInterval);
} else if(anima.clientHeight - goal > 0){
anima.style.height = (anima.clientHeight - speed) + 'px';
} else {
anima.style.height = (anima.clientHeight + speed) + 'px';
}
}
heading.onclick = function() {
if(!animating) {
animating = true;
var goal = (anima.clientHeight >= divHeight) ? 0 : divHeight;
myInterval = setInterval(slide, 13, speed, goal);
}
}
See http://www.jsfiddle.net/yijiang/dWJgG/2/ for a simple demo.
I've corrected your code a bit (See working demo)
window.onload = function () {
var heading = document.getElementsByTagName('h1')[0];
var anima = document.getElementById('anima');
var divHeight = 250;
heading.onclick = function () {
var speed = 10;
var myInterval = 0;
function slideUp() {
divHeight -= speed;
if (divHeight <= 0) {
divHeight = 0;
clearInterval(myInterval);
}
anima.style.height = divHeight + 'px';
}
function slideDwn() {
divHeight += speed;
if (divHeight >= 250) {
divHeight = 250;
clearInterval(myInterval);
}
anima.style.height = divHeight + 'px';
}
function slide() {
console.log(divHeight )
if (divHeight == 250) {
myInterval = setInterval(slideUp, 30);
} else {
myInterval = setInterval(slideDwn, 30);
}
}
slide();
}
}