How to clear an interval in an if statement - javascript

So, I'm working on a game called Mini Arcade which features a bunch of different minigames. I found a way to create a fade effect after I click a button to go to another page. The fade effect seems to work properly, but after going to the console of the page, the fade interval doesn't clear like it's supposed to when the opacity variable hits 0, which makes the opacity of the object go into the negatives. This is a problem because once I begin making buttons that fade back to the homepage, the homepage will still be fading out, while fading in at the same time, which is a big problem.
if(opacity == 0){
clearInterval(fadeOut);
}
As you can tell, it's just a simple if statement within my fade out function. Sorry if I didn't explain this well, but I could really use some help. Thanks.

You need to initiate your Interval first and assign it to a variable:
var myInterval = window.setInterval(fadeOut, 1000);
then you can clear it with clearInterval:
clearInterval(myInterval);

Related

How to stop animations when a sprite's movement stops in Phaser 3

Posting this to share how I tackled this problem. I had searched everywhere and couldn't seem to find a working solution.
The problem (my version) - I had a sprite that was going to be my player in my game. I had both a running left and a running right animation. These animations are set to loop, so the player will appear as if they are running when their velocity is increased. I wanted the player's animation to stop once they had stopped moving
My implementation
update() {
//If right arrowkey is pressed
if (this.arrowKeys.right._justDown) {
//Move player
this.hero.setVelocityX(5);
//Play your animation animation
this.hero.anims.play('yourAnim', true);
};
//This will run every time the animation "repeats", meaning it has gone through all of its frames. Make sure your animation is set to loop!
this.hero.on("animationupdate", () => {
//If the player has stopped moving
if (this.hero.body.velocity.x < 0.5 && this.hero.body.velocity.x > -0.5) {
//Stop the animation
this.hero.anims.stop();
}
});
}
Formatting is a little bad. And there's almost surely a slightly quicker way to do this. But this is my implementation for now, and I just wanted to share in case someone else was having the same issue! Feel free to comment with a better solution, or any questions
I had a problem like this, you might not need a solution anymore, but others might. I used JustDown to start the animation and JustUp to go to my idle state. Code in update:
if(Phaser.Input.Keyboard.JustDown(downKey)){
gamePiece.anims.play("down");
}
if(Phaser.Input.Keyboard.JustUp(downKey)){
gamePiece.anims.play("spin");
}
In your case, it would stop the animation instead of an idle animation.
I think you're looking for the .pause() method.

CSS Animation stops when tab loses focus [duplicate]

I'm developing a little roulette game like: https://csgofast.com/
My question is, the roulette animation used with transform & transition, works pretty well when I'm in the actual tab.
The problem is, when i move to another tab or miniminize, before the roullete starts, until i dont get back to the tab, it dosnt start scrolling / moving.
Is like the roullete animation is waiting until i get to the tab again, to start moving.
let intervalJackpot = setInterval(() => {
if (something == true) {
$("#slider").css('transform', 'translate3d(-7850px, 0px, 0px)');
$("#slider").css('transition', '15000ms cubic-bezier(0.32, 0.64, 0.45, 1)');
}
}, 500);
The code is in a setInterval, and that's the problem as i know.
The DB.roulleteSpin is just a simple code that comes from the Database.
How I could approach this situation? I will like to know the roulette starts moving and ends in the right place, no matters if I'm in the tab or not.
How i could approach this situation? Can someone show me an example? Thanks a lot.

Slideshow transition in javascript

I cant seem to get this slide show to work with javascript. the image fades in and out correctly on the first image but when transitioning for the second image it seems to immediately skip to the image instead of transition like the previous.
<script type="text/javascript">
var images = ["image1.png", "image2.png", "image3.jpg"];
var imagecount = 0;
window.setInterval(setImage,5000);
function setImage(){
$('.bgimage').fadeIn(5000);
$('.bgimage').css('background-image','url('+images[imagecount]+')');
$('.bgimage').fadeOut(5000);
imagecount++;
if(imagecount > 2){
imagecount=0;
}
}
</script>
Without seeing the html structure or a fiddle, it's hard to trouble-shoot with any accuracy. I'm guessing the issue is probably with your fadeIn and fadeOut calls, as they are currently set to animate for a full 5 seconds each, and animating at the same time as one another (They are called asynchronously). Instead, you should adjust the fadeIn method to execute after the fadeOut finishes using the built-in jQuery callback. Like so:
$('.bgimage').fadeOut(500, function() {
$('.bgimage').css('background-image','url('+images[imagecount]+')');
$('.bgimage').fadeIn(500);
});
I've also switched the order of your fade calls, as you should fade out the image, then update it (while it's not visible), then fade it back in. Your interval should still work the way you want, running every 5 seconds. Now the transitions won't take a full 5 seconds to animate.

Iframe and absolute positioned elements

I have a small issue with absolute positioned elements inside of iframe.
So I have a page, on the page I have a iframe with small game. In the game is a guy and the guy has absolute positioned pupils. The pupils are moving by javascript.
Everything works just fine, but if I open that page, and go ahead and browse other pages in different tabs, After I come back the pupils are on other place than before (completely ut form eyes.)
There are more elements positioned absolutely in that iframe and none have the same problem I guess it is because of the Javascript animation. Did someone encouter similar problem? Im sorry but for many reasons I cannot post the page here.
I can post script for pupils animation:
function eyes_sides(){
$('.eyes').animate({
left:parseInt($('.eyes').css('left'))-9
},{duration:1500});
$('.eyes').animate({
left:parseInt($('.eyes').css('left'))
},{duration:1000});
}
function eyes_roll(){
$('.eyes').animate({
left:parseInt($('.eyes').css('left'))-7,
top:parseInt($('.eyes').css('top'))-18
},{duration:1800});
$('.eyes').animate({
left:parseInt($('.eyes').css('left')),
top:parseInt($('.eyes').css('top'))
},{duration:1300});
}
function animate_eyes(){
var animation = random_number(1,2);
//alert(animation);
switch(animation){
case 1:
eyes_roll();
break;
case 2:
eyes_sides();
break;
}
var delay = random_number(4000,12000);
window.animateEyes = setTimeout(function(){animate_eyes()},delay);
}
The script is not perfect, but does what requires.
I was thinking what could cause the problem, and maybe it is somehow connected to that animation runs when the tab is not active? Maybe adding "onBlur" and "onFocus" to stop / start animation would help?
Thanks for advice!
This code is supposed to stop the animation. At least it triggres onblur on your IFRAME. You'll figure out easily, how to start the animation again.
I'm not familiar with jQuery, but you can "translate" the code.
window.onload=function (){
var ifr=document.getElementById('your_iframe');
(function (x){x.onblur=function (){clearTimeout(x.contentWindow.animatedEyes);return;}}(ifr));
return;
}

Using jQuery for alternating png transition

Very basic question. I have a very simple web design utilizing a png with transparency, overlaying another base image. The idea here is that it cycles visibility continously, fading in quickly, displaying for a longer interval, fading out quickly, and remaining invisible for an equal longer interval, basically replicating the behavior of an animated GIF from back in the day. The png starts with display set to none.
My problem is jQuery doesn't seem to have a "pause" or "delay" event handler to help here. There are numerous plugins filling the gap, but I'd rather not include one if there's a simple way that I'm missing. That might require falling back on setInterval or setTimeOut, but I'm uncertain of the syntax to do that.
What I want schematically is something like:
--loop start--
$("#pngOverlay").fadeIn(1000);
(5000 delay) // using setTimeout or setInterval if jQuery method unavailable
$("#pngOverlay").fadeOut(1000);
(5000 delay)
--loop repeat--
The following does the behavior once, so I guess if this could be wrapped in a loop it might work, but it doesn't strike me as elegant or the right way.
setTimeout(function() {
$("#pngOverlay").fadeIn(1000);
}, 5000);
setTimeout(function() {
$("#pngOverlay").fadeOut(1000);
}, 10000);
Thanks for any suggestions. I would just use GIFs, but need the transparency for this. (In the old days, we used animated GIFs and we liked them...)
<script language="JavaScript" type="text/javascript">
function showimage(){
$("#pngOverlay").fadeIn(1000);
setTimeout('hideimage()',5000);
}
function hideimage(){
$("#pngOverlay").fadeOut(1000);
setTimeout('showimage()',5000);
}
$(document).ready(function() {
showimage();
});
</script>
Something like this?
setInterval(function()
{
var elm = $('#pngOverlay');
if (elm.is(':hidden'))
elm.fadeIn(1000);
else
elm.fadeOut(1000);
}, 5000);
How about using an animated PNG?
One trick I have seen is to have jQuery carry out an animation for 5000 milliseconds that has no visible effect.
$("#pngOverlay").animate({opacity:1}, 5000);
If the opacity of the item was 1 to start with then it does not have a visible effect but it does pause for 5 seconds.

Categories

Resources