Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – How can I implement a "Flash in" animation?

Currently I have a div that has the class "hidden" (css, display: none). I want it to add the class "full-size" after a set ammount of time with javascript. However, how can I implement a "flash in" function?

setTimeout(fade_out, 28000);

function fade_out() {
    $("#interval").fadeOut().empty();
}

window.setTimeout(function() {
    $("#main").fadeIn().addClass('full-size');
}, 28000);

Instead of "fadeIn()", is there something similar that gives a "White flash in" animation where it flashes you with a white color and then the white color fades out to reveal "#main"?

Sorry if this request is unreasonable, this’ll be my first time asking a question instead of using AI!! Figured that it might be a good opportunity 😀

I tried searching on google but really couldn’t find what I was searching for.
The best I got was a "repetitivily flashing, blinking" animation:

$("#someElement").fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100);

Which, unluckily, it isn’t what I was searching for 🙁

Tags:

2

Answers


  1. 0

    You can use CSS animation to this. Test the sample code. Hope it be helpful.

    Change to flash once by editing CSS. animation:flasher 2s 1 linear; infinite –> 1

    Change speed by editing CSS. animation:flasher 0.5s 1 linear; 2s –> 0.5s

    Sample code:

    <style>
@keyframes flasher{
0%{background-color:transparent;}
50%{background-color:white;}
100%{background-color:transparent;}
}
</style>


<body>

<div style="border:1px solid black;width:200px;height:200px;position:relative;">
<div id="flasher0" style="animation:flasher 2s infinite linear;position:absolute;left:0;top:0;width:100%;height:100%;"></div>

the main content.
You can change to flash once by editing CSS. animation:flasher 2s 1 linear; infinite --> 1
You can change speed by editing CSS. animation:flasher 0.5s 1 linear;  2s --> 0.5s

</div>

<button onclick="startFlash();">click to start flasher.</button>
<button onclick="stopFlash();">click to stop flasher.</button>


<script>
function stopFlash(){
document.getElementById("flasher0").style.animation="none";
}
function startFlash(){
document.getElementById("flasher0").style.animation="flasher 2s infinite linear";
}
</script>


</body>
    Login or Signup to reply.
  2. 0

    If you really want to use JavaScript, use the Web Animation API, we don’t even have to use classes. It’s hard to be more concise than that.

    elem.animate([{opacity:0},{opacity:1}],{duration:1000,iterations:Infinity})
    <h1 id="elem">Fade-in Blink effect!</h1>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search