When i click on the toggle button and it hides the div, it closes abruptly without the fading animation. What am I going wrong?
I would like to hide the div with a fading effect too. What is being missed?
CSS:
#-webkit-keyframes fadeIn { from { opacity:0; opacity: 1\9; /* IE9 only */ } to { opacity:1; } }
#-moz-keyframes fadeIn { from { opacity:0; opacity: 1\9; /* IE9 only */ } to { opacity:1; } }
#keyframes fadeIn { from { opacity:0; opacity: 1\9; /* IE9 only */ } to { opacity:1; } }
.fade-in {
opacity:0; /* make things invisible upon start */
-webkit-animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;
}
.fade-in.one {
-webkit-animation-delay: 0.2s;
-moz-animation-delay: 0.2s;
animation-delay: 0.2s;
}
The HTML:
<a onclick="toggle_visibility('foo');">Toggle Foo</a>
<div id="foo" style="display:none;" class="fade-in one">
Here I am toggling the display text
</div>
Javascript:
<script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'none')
e.style.display = 'block';
else
e.style.display = 'none';
}
//-->
</script>
If you want to have additional adjustments, let me know.
function toggle(id) {
var e = document.getElementById(id);
e.style.display = "block";
setTimeout(function(){ e.classList.toggle('visible') }, 1);
}
function transition(id){
var el = document.createElement("temp");
var transitions = {
'transition':'transitionend'
}
for(t in transitions){
if( el.style[t] !== undefined ){
return transitions[t];
}
}
}
document.getElementById("foo").addEventListener(transition("foo"), function() {
if(!this.classList.contains("visible")) {
this.style.display='none';
}
});
#foo.visible {
opacity: 1;
}
#foo {
opacity: 0;
-webkit-transition: opacity 2s;
transition: opacity 2s;
}
<a onclick="toggle('foo')" class="toggle">Toggle Foo</a>
<div id="foo">
Here I am toggling the display text
</div>
Related
I wanted to have an image fade permanently until the user refreshes the page, and I was able to do so with animation-fill forwards. However, I would like this animation to initiate only when you hover over it.
I am able to make an image fade with hover independently, but it resets after the user moves their cursor from the element. In short, I am unable to make the transition and the hover effect work in conjunction.
Here is the HTML
<div class="hill">
<img id="hill" src="https://i.postimg.cc/rw48gd3R/hillary.png">
</div>
Here is the CSS
body {
height:1000px;
}
#hill {
position: relative;
height: 100vh;
top: 100vh;
}
#-webkit-keyframes fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
#-moz-keyframes fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
#-o-keyframes fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
#keyframes fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
#hill {
-webkit-animation: fade 5s;
-moz-animation: fade 5s;
-o-animation: fade 5s;
animation: fade 5s;
animation-fill-mode: forwards;
}
This is the codepen to my project: https://codepen.io/narutofan389/collab/LYpxqmY
Much obliged for your help.
:hover state only applies when it is hovered, so it will not persist. I would recommend toggling a class on mouseenter via javascript. I've attached a fiddle to accomplish what you're intending. Let me know if you need any clarity. :)
document.addEventListener("DOMContentLoaded", function() {
var img = document.getElementById("hill");
img.addEventListener("mouseenter", function() { img.classList.add("hide")});
});
body {
height:1000px;
}
#hill {
position: relative;
height: 100vh;
}
#-webkit-keyframes fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
#-moz-keyframes fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
#-o-keyframes fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
#keyframes fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
#hill.hide {
-webkit-animation: fade 5s;
-moz-animation: fade 5s;
-o-animation: fade 5s;
animation: fade 5s;
animation-fill-mode: forwards;
}
<div class="hill">
<img id="hill" src="https://i.postimg.cc/rw48gd3R/hillary.png">
</div>
You can consider animation-play-state and have the animation defined on the element initially but the duration need to be short because it won't work if the user rapidly move the mouse
#hill {
position: relative;
height: 100vh;
animation: fade 0.5s paused forwards;
}
#hill:hover {
animation-play-state:running;
}
#keyframes fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
<img id="hill" src="https://i.postimg.cc/rw48gd3R/hillary.png">
I want create an fadeIn and fadeOut effect for my JS popup window in css.
fadeIn works fine but not the fadeOut effect, i dont know how i must change my JS time, i have tried some things, but if i use both, fideIn and fadeOut in CSS, the Popup just flashing.
But i want an 5 seconds effect for both and with an delay of also 5 seconds to show the popup.
CSS fadeIn:
.fadeInclass {
animation: fadeIn ease 5s;
-webkit-animation: fadeIn ease 5s;
-moz-animation: fadeIn ease 5s;
-o-animation: fadeIn ease 5s;
-ms-animation: fadeIn ease 5s;
}
#keyframes fadeIn{
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-moz-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-webkit-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-o-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-ms-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
JS:
var div = document.getElementById("show-popup");
var showFlag = true;
var myIntv = setInterval(function() {
if(showFlag){
div.style.display = 'block';
showFlag = false;
}
else{
div.style.display = 'none';
showFlag = true;
}
}, 5 * 1000);
Whats the best way to add the fadeIn and fadeOut effect, with js or CSS animation?
5 seconds fadeIn effect, then stay for 5 seconds and again 5 seconds fadeOut.
You could use a single animation to achieve all of this.
The first 5 seconds fades in the control, it stays fully visible for 5 seconds, and then fades out for 5 seconds.
.fadeInclass {
animation: fadeIn ease 15s;
background-color: red;
height: 50px;
opacity: 0;
width: 50px;
}
#keyframes fadeIn{
0% {
opacity:0;
}
33% {
opacity:1;
}
66% {
opacity:1;
}
100% {
opacity:0;
}
}
<div class="fadeInclass"></div>
You could simply use CSS transition with opacity:
#popup{
opacity: 0;
transition: ease opacity 5s;
}
#popup.fadeInclass{
opacity: 1;
}
And then just add/remove the .fadeInClass to your element in JS to achieve the desired goal:
function showPopup(){
var div = document.getElementById("popup");
div.style.display = 'block';
div.classList.add("fadeInclass");
}
function hidePopup(){
var div = document.getElementById("popup");
div.classList.remove("fadeInclass");
setTimeout(function(){
div.style.display = 'none';
}, 5000);
}
I am using typed.js from the link http://www.mattboldt.com/demos/typed-js/. Its working very nicely. Now I want to change my body background every time when a sentence completed.
I mean when "abcd ef" comes background should be blue.
for "ghijkl" ---the background should be red
and so on.
How can I do this. Please share with me if any one has any idea. I am adding my code below.
<div id="typed-strings">
<p><span>abcd ef.</span></p>
<p><span>ghijkl.</span></p>
<p><span>mnopqr.</span></p>
<p><span>stuvwxyz.</span></p>
</div>
<span id="typed" class=""></span>
<script src="/assets/typed.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#typed").typed({
// strings: ["Typed.js is a <strong>jQuery</strong> plugin.", "It <em>types</em> out sentences.", "And then deletes them.", "Try it out!"],
stringsElement: $('#typed-strings'),
typeSpeed: 60,
backDelay: 800,
loop: true,
contentType: 'html', // or text
// defaults to false for infinite loop
loopCount: false,
callback: function(){ foo(); },
resetCallback: function() { newTyped(); }
});
$(".reset").click(function(){
$("#typed").typed('reset');
});
});
function newTyped(){ console.log("Call");/* A new typed object */ }
function foo(){ console.log("Callback"); }
</script>
<style type="text/css">
/* code for animated blinking cursor */
.typed-cursor{
opacity: 1;
font-weight: 100;
font-size: 36px;
-webkit-animation: blink 0.7s infinite;
-moz-animation: blink 0.7s infinite;
-ms-animation: blink 0.7s infinite;
-o-animation: blink 0.7s infinite;
animation: blink 0.7s infinite;
}
#-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
#-webkit-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
#-moz-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
#-ms-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
#-o-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
</style>
here what you need:
after
loopCount: false,
insert this line
preStringTyped: function() { alert('background change happens now'); },
p.s. just change alert to your function. So, that will trigger when each sentence starts.
Time for setting the background-color !
As simple as
$(".element").typed({
strings: ["First sentence.<style>body{background-color: yellow}</style>Second sentence.<style>body{background-color: red}</style>"],
typeSpeed: 1,
contentType: "html"
});
Got the solution:
$(function(){
var x=1;
$("#typed").typed({
// strings: ["Typed.js is a <strong>jQuery</strong> plugin.", "It <em>types</em> out sentences.", "And then deletes them.", "Try it out!"],
stringsElement: $('#typed-strings'),
typeSpeed: 100,
backDelay: 1000,
loop: true,
contentType: 'html', // or text
// defaults to false for infinite loop
loopCount: false,
/*preStringTyped: function() { myfunc(); },*/
callback: function(){ foo(); },
preStringTyped: function() {
console.log(x);
x++;
if(x == 5) {
x = 1;
}
if(x == 1){
$("#start").addClass("myimg4").removeClass("myimg1 myimg2 myimg3");
}
if(x == 2){
$("#start").addClass("myimg1").removeClass("myimg2 myimg3 myimg4");
}
if(x == 3){
$("#start").addClass("myimg2").removeClass("myimg1 myimg3 myimg4");
}
if(x == 4){
$("#start").addClass("myimg3").removeClass("myimg1 myimg2 myimg4");
}
myfunc(); },
resetCallback: function() { newTyped(); }
});
$(".reset").click(function(){
$("#typed").typed('reset');
});
});
css
.myimg1 {
background-image: url('../assets/home/bg_1.jpg');
-webkit-transition: background-image 0.8s ease-in-out;
transition: background-image 0.8s ease-in-out;
}
.myimg2 {
background-image: url('../assets/home/bg_2.jpg');
-webkit-transition: background-image 0.8s ease-in-out;
transition: background-image 0.8s ease-in-out;
}
.myimg3 {
background-image: url('../assets/home/bg_3.jpg');
-webkit-transition: background-image 0.8s ease-in-out;
transition: background-image 0.8s ease-in-out;
}
.myimg4 {
background-image: url('../assets/home/bg_4.jpg');
-webkit-transition: background-image 0.8s ease-in-out;
transition: background-image 0.8s ease-in-out;
}
I want to text effect like text increase size and decrease size loop with no limit using JavaScript
JavaScript:
function fontSizer() {
if (!document.getElementById("font").style.fontSize) {
document.getElementById("font").style.fontSize = "15px";
}
if (document.getElementById("font").style.fontSize == "15px") {
document.getElementById("font").style.fontSize = "10px";
} else {
document.getElementById("font").style.fontSize = "15px"
}
}
HTML:
<p onload="fontSizer" id="font">Test</p>
you can raise the event on the body onload event.
<body onload="init()">
<p id="font">Test</p>
</body>
This will call your function if you put it but one good way it to pass to an intermediate function where you call all this kinf of function (if you have several) :
function init() {
fontSizer();
//other method to call during the body loading
}
And if you want i can purpose you the following optimization for your code :
function fontSizer() {
var element = document.getElementById("font");
if (element.style.fontSize == "15px") {
elemeny.style.fontSize = "10px";
return;
}
element.style.fontSize = "15px"
}
You can also use css animation by using something like :
#font {
font-size: 15px;
-webkit-animation: theanim 4s;
-moz-animation: theanim 4s;
-o-animation: theanim 4s;
animation: theanim 4s;
}
#keyframes theanim {
from { font-size:10px; }
to { font-size:15px; }
}
The text effect can be achieved by using onload event with <body onload="fontSizer()> tag.
function fontSizer() {
if (!document.getElementById("font").style.fontSize) {
document.getElementById("font").style.fontSize = "15px";
}
if (document.getElementById("font").style.fontSize == "15px") {
document.getElementById("font").style.fontSize = "30px";
} else {
document.getElementById("font").style.fontSize = "15px"
}
}
<body onload="fontSizer()">
<p id="font">Test</p>
</body>
You can do it without javascript function, only with css animation :
#font {
font-size: 15px;
-webkit-animation: theanim 4s;
-moz-animation: theanim 4s;
-o-animation: theanim 4s;
animation: theanim 4s;
}
#keyframes theanim {
from { font-size:10px; }
to { font-size:15px; }
}
Well JavaScript not work Good Its work fine with animation css
CSS:
<style>
#keyframes fadeIn {
from { font-size: 20px; color:red;}
}
.animate-flicker {
animation: fadeIn 0.2s infinite alternate;
}
</style>
HTML
<span class="animate-flicker">Text</span>
Here i creat animation that turns from color to grayscale but i want it will start only when user will scroll down (as it's in my site with a lot of images and need to scroll down to get there)
here is the fiddle example:
http://jsfiddle.net/4tHWg/7/
.box {
float: left;
position: relative;
width: 14.285714286%;
}
.boxInner img {
width: 100%;
display: block;
}
.boxInner img:hover {
-webkit-filter: grayscale(0%);
}
#-webkit-keyframes toGrayScale {
to {
-webkit-filter: grayscale(100%);
}
}
.box:nth-child(1) img {
-webkit-animation: toGrayScale 1s 0.5s forwards;
}
.box:nth-child(2) img {
-webkit-animation: toGrayScale 2s 1s forwards;
}
.box:nth-child(3) img {
-webkit-animation: toGrayScale 3s 1.5s forwards;
}
This should do the trick.
$( window ).scroll(function() {
$(".box").each(function (index){
if (index == 1)
{
$(":nth-child("+index+")", $(this)).css('-webkit-animation','toGrayScale 1s 0.5s forwards');
}
if (index == 2)
{
$(":nth-child("+index+")", $(this)).css('-webkit-animation','toGrayScale 2s 1s forwards');
}
if (index == 2)
{
$(":nth-child("+index+")", $(this)).css('-webkit-animation','toGrayScale 3s 1.5s forwards');
}
});
If I understand correctly what you are looking to do, then you can handle scrolling with .scroll() function. Then trigger the animation if the windows .scrollTop() reaches each .box's offset().top.
$(window).scroll(function(){
var st = $(this).scrollTop();
$('.box').each(function(index, element){
if(st >= $(this).offset().top){
$(this).find('img').css({'-webkit-animation':'toGrayScale 1s 1s forwards'});
}
});
});
Here is the updated fiddle.