I have written the following function for a school project, but the clearinterval() is not working. I have looked at several questions about the same problem and it was a problem with the scope most of the time.
However, I think my function uses a global variable, which should work. It doesn't, and I have no idea why. Please enlighten me.
HTML (actually part of a table with similiar rows)
<tr id="row35" data-uitval="1" class="">
<td>
<button type="button" id="knopje" class="tabeluur" data-uur="35" onclick="check(this)">
<p>✕</p>
</button>
</td>
<td> other cells... </td>
</tr>
Code (Javascript, in <head>-tag)
var fadingFunc;
var busy = false;
function check(uurID) {
if(busy) {
$('#foutmelding').html('Uw vorige bewerking loopt nog. Wacht totdat deze is afgelopen.')
} else {
uitval(uurID);
};
};
function uitval(uurID) {
// makes the button child (<p>) fade out and back in continuously
fadingFunc = window.setInterval(fadeBlink(uurID), 2000);
$.post(
'AnswerMe.php',
{
// send stuff
},
function(data) {
if(data === 'succes: uitval toegevoegd') {
window.clearInterval(fadingFunc);
// do stuff
} else if(data === 'succes: uitval verwijderd') {
window.clearInterval(fadingFunc);
// do stuff
} else {
window.clearInterval(fadingFunc);
// do stuff
};
}
);
};
Note 1: I stripped all the code that actually does something, since it is irrelevant for this question.
Note 2: I tested this on my computer (localhost, google chrome) and fadingFunc does hold a value in global scope (tested via console in developers mode)
So if I got it - you want the X inside the button to blink while the post request is waiting for the response.
Your code is almost there but you are not using the setInterval correctly and you are choosing a poor approach to achieve that. First we will fix your code and then check out my approach using a CSS animation.
To fix your code:
Code must be placed inside the <head> tag since you are using some inline call.
Remove all window. not needed - use setInterval( instead of window.setInterval.
When setting the actuall interval function wrap the target function with a function -setInterval(function(){ fadeBlink(uurID); }, 2000)
See It work: JSFIDDLE
The second approach which I think will be better for you is to add a class before the request and remove it when its done. the class obviuslly will be animated.
Second approach: JSFIDDLE
Second appraoch code:
JS
var busy = false;
function check(uurID) {
if(busy) $('#foutmelding').html('Uw vorige bewerking loopt nog.');
else uitval(uurID);
}
function uitval(uurID) {
$(uurID).addClass('blink');
busy = true;
$.post('http://fiddle.jshell.net/_display/',
{ test:'test' },
function() {
$(uurID).removeClass('blink');
busy = false;
}
);
}
CSS
.blink p {
-webkit-animation-name: blinker;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: blinker;
-moz-animation-duration: 1s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
animation-name: blinker;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
#-moz-keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
#-webkit-keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
#keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
Related
I made some fandeIn and fadeOut codes to an exercise.
I'm trying to remove the setTimeout() on the fadeIn().
Like using an addEventListner maybe, but there is no transition on .displayNone.
On the MDN I just found transitions interacting with EventListner.
function fadeOut(disable) {
disable.classList.remove('visible');
disable.classList.add('hidden');
disable.addEventListener('transitionend', () => disable.classList.add('displayNone'));
};
function fadein(enable, timer) {
if (!timer) timer = 350;
enable.classList.remove('displayNone');
setTimeout(function () {
enable.classList.remove('hidden');
enable.classList.add('visible');
}, timer);
};
.displayNone {
display: none;
}
.visible {
visibility: visible;
opacity: 1;
transition: opacity 1.5s linear;
}
.hidden {
visibility: hidden;
opacity: 0;
transition: visibility 0s 350ms, opacity 350ms, display 350ms linear;
}
P.S.: This works good, I'm just trying another way to make it works too.
The setTimeout method returns a timeout descriptor/id (actually just an integer). You may use it to remove the timeout later:
// setting timeout
var timeout = window.setTimeout(function(){}, 5000);
window.clearTimeout( timeout )
I've created a slider animation as demonstrated below:
#mixin progress {
#-webkit-keyframes interval {
from {
width: 0;
}
to {
width: 100%;
}
}
animation: var(--duration) linear 0s interval;
animation-play-state: var(--playState);
}
.slider-item {
#include progress;
}
When a click event fires my task is to make the current slider animation be completed.
I have tried to select the target element for example:
this.$refs[`slider-item-${id}`]
Nevertheless, the animation property is still empty, is there something that i'm missing here? or is there a better alternative for that? (i have tried the API https://developer.mozilla.org/en-US/docs/Web/API/Element/animate without success)
Try to replace
animation: var(--duration) linear 0s interval;
with
animation: var(--duration) linear 10ms forwards;
to see the animation end as the last state remaining on your page.
I want to remove a div element on click event but i want to remove it with a fade out effect. I have got some JQuery solution but i need pure JavaScript or css solution.
document.querySelector('.list').addEventListener("click", function(e){
if (e.target.localName === "span") {
var removeTarget = e.target.parentNode.parentNode;
removeTarget.parentNode.removeChild(removeTarget);
};
});
This code is removing the div element with no effect. How can i add a fade out effect?
I've made this function a while ago for a personal project:
function removeFadeOut( el, speed ) {
var seconds = speed/1000;
el.style.transition = "opacity "+seconds+"s ease";
el.style.opacity = 0;
setTimeout(function() {
el.parentNode.removeChild(el);
}, speed);
}
removeFadeOut(document.getElementById('test'), 2000);
There are two ways you can achieve this: CSS3 animation or jQuery animation.
CSS3 Animation
In your CSS document, add:
.list {
opacity: 1;
-webkit-transition: opacity 1000ms linear;
transition: opacity 1000ms linear;
}
This will make any change of opacity to your item fade by 1000ms.
Change line 4 of your JavaScript to:
removeTarget.style.opacity = '0';
setTimeout(() => removeTarget.remove(), 1000);
This will make your item change opacity to 0, thus making the transition from step 1 have an effect. Then it will remove the item with your code after 1000ms.
Note: Make sure the time of the CSS3 transition and the setTimeout are the same.
jQuery Animation
Get jQuery
Go to the jQuery Website and download it, or
Add ` in your HTML document before any jQuery code.
Change line 4 of your Javascript to:
removeTarget.fadeOut(1000)
This will Fade Out your item by 1000ms, you can change this time to whatever you want.
In 2020 you can forgo use of use setTimeout for the animationend event, removing the need to maintain the duration in two places:
.fade-out {
animation: fade 2s;
-webkit-animation: fade 2s;
-moz-animation: fade 2s;
}
/* Animate opacity */
#keyframes fade {
from { opacity: 1 }
to { opacity: 0 }
}
#-moz-keyframes fade {
from { opacity: 1 }
to { opacity: 0 }
}
#-webkit-keyframes fade {
from { opacity: 1 }
to { opacity: 0 }
}
const elementToFade = document.getElementById('my-element');
elementToFade.onanimationend = (e) => {
if (e.target.classList.contains('fade-out')) {
elementToFade.parentNode.removeChild(elementToFade);
}
};
// To fade away:
elementToFade.classList.add('fade-out');
It's a good question, but to animate some element in html, this element has to exist while it is animating. So, you have some ways to do this, a good way is hide this element with CSS and after the animation you remove this element. While you hiding you can animate, you can see this example:
<style>
.hide{
opacity: 0;
}
.fade-out {
transition:1s linear all;
}
</style>
<span class="list fade-out">
This is a List, click me to hide
</span>
<script>
document.querySelector('.list').addEventListener("click", function(e) {
if (e.target.localName === "span") {
//Add CSS hide and animate with fade out
var currentCSS = this.className;
this.className = currentCSS + ' hide';
var removeTarget = e.target.parentNode.parentNode;
setTimeout(function(){
removeTarget.parentNode.removeChild(removeTarget);
},1000);
};
});
</script>
Add the following CSS class to the element using elem.className="my-animation"; on click:
.my-animation {
animation: fade 3s steps(90) forwards;
-webkit-animation: fade 3s steps(90) forwards;
-moz-animation: fade 3s steps(90) forwards;
}
#keyframes fade {
from {
opacity: 1;
}
to {
opacity: 0.0;
}
}
You may control the speed of the animation by modifying the steps(number) as well.
Just goto jQuery source code, take out the fade code which is in pure javascript, and use it, no need to reinvent the wheel,
or a hint is reduce the height of div to 0 slowly using setTimeInterval()
or a css solution would be to use transform and transition properties
I encountered such a problem，i need to play animation by css3,here is my sass code:
.new-page4-play{
.contain_doll{
#-webkit-keyframes contain_doll_play{xxxx}
-webkit-animation:contain_doll_play 1s;
}
.contain_photo{
#-webkit-keyframes contain_photo_play{xxxx}
-webkit-animation:contain_doll_play 2s linear 2s;
.icon{
#-webkit-keyframes contain_icon_play{xxxx}
-webkit-animation:contain_doll_play 3s linear 3s;
}
}
}
and i want to trigger the callback after all animation complete (it should be 6s),but
document.querySelector('.new-page4-play').addEventListener("webkitAnimationEnd",callback)
will trigger callback 3 times,1s,4s and 6s,so what should i do to make the callback work once on when 6s?
add a counter variable the can be accessed by the callback function
a=0;
someName(){
a++;
if(a==3){
//do something
}
}
I am in a need of having a blinking function in my application. Basically, I am creating a calculator and I need something like "|" to blink after the user inputs each numbers from the button. For firefox and opera, something like:
var str = "Hello world!";
document.write(str.blink());
This is exactly what I want. My problem is they don't work in Chrome, IE or safari. Is there any easy substitution for this or I have to create blinking functionality myself if I want my application to run on cross-browsers?
you could use just css3 :
#keyframes 'blink' {
0% { background: rgba(255,0,0,0.5); }
50% { background: rgba(255,0,0,0); }
100% { background: rgba(255,0,0,0.5); }
}
Try this-:SOLUTION NO 1
You can create your own custom blink function.This can also be done by creating css class and adding them to our element.
function blink()
{
setInterval(function () {
document.getElementById("blink").style.webkitTransitionDuration = "0.7s";
document.getElementById("blink").style.opacity = 0;
setTimeout(function () {
document.getElementById("blink").style.webkitTransitionDuration = "0.7s";
document.getElementById("blink").style.opacity = 1;
}, 700);
},1400);
}
OR
try this-->SOLUTION NO.2
JAVASCRIPT
function blink()
{
document.getElementById('blink').className = "animated blink_css";
}
In css
.animated {
-webkit-animation-fill-mode:both;
-moz-animation-fill-mode:both;
-ms-animation-fill-mode:both;
-o-animation-fill-mode:both;
animation-fill-mode:both;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
-ms-animation-duration:1s;
-o-animation-duration:1s;
animation-duration:1s;
}
#keyframes 'blink' {
0% { background: rgba(255,0,0,0.5); }
50% { background: rgba(255,0,0,0); }
100% { background: rgba(255,0,0,0.5);
}
//try moz for mozilla,o for opera and webkit for safari and chrome
.blink_css {
-webkit-animation-name: blink;
-moz-animation-name: blink;
-o-animation-name: blink;
animation-name: blink;
}
Both of them will work.Tested!!!
If you truly want cross-browser compatibility, you should use a library, jQuery for instance.
Here is a nice little script that accomplishes what you want- http://www.silverphp.com/simple-jquery-blink-script-alternative-to-html-blink-tag.html
On the other hand, if you prefer vanilla JS, you may have to implement it yourself. Maybe use setInterval() with a function that makes the element disappear?