We Keep Coding

How to play an Animation with JS

Im coding a fade-in and fade-out text on button hover... and I have to call an animation onhover... how I can do it?
const button = document.getElementById("btn");
const disp_text = document.getElementById('disp_text');
button.onmouseover = function(){
//Here goes the animation to play
disp_text.innerText = "Next";
}
I've Tried:
const button = document.getElementById("btn");
const disp_text = document.getElementById('disp_text');
button.onmouseover = function(){
animation.Play("fadein");
disp_text.innerText = "Next";
}
But nothing...
If someone can help, I would be very grateful...

Here's some code that uses javascript to animate a fade when the button is hovered. I've also implemented a pure css version. I was about to implement a version using the Animate API but I see that #DEEPAK has done that, so that's a third option.
const button = document.getElementById("btn");
const disp_text = document.getElementById('disp_text');
button.onmouseover = function(){
disp_text.classList.add('button-hover');
}
button.onmouseout = function(){
disp_text.classList.remove('button-hover');
}
#disp_text {
opacity:0;
transition: opacity .25s ease-in-out;
}
#disp_text.button-hover {
opacity:1;
}
#disp_text2 {
opacity:0;
transition: opacity .25s ease-in-out;
}
#btn2:hover #disp_text2 {
opacity:1;
}
<button id='btn'>Hover over this to see the animation of the DIV below</button>
<p id='disp_text'>Next</p>
<p>The one below uses css only - no javascript. This is easy because the span is inside the button</p>
<button id='btn2'><span id='disp_text2'>Next</span></button>

.play() will only work if you have mentioned how to animate
const button = document.getElementById("btn");
const disp_text = document.getElementById('disp_text');
button.onmouseover = function(){
disp_text.innerText = "Next";
const animation = disp_text.animate(
[
{ opacity: 0 },
{ opacity: 1 }
], {
easing: 'ease',
duration: 2000
});
animation.play();
}
<button id="btn">Hello</button>
<p id="disp_text"></p>

I am not sure what you mean by "animation.fadeIn". There is, to my knowledge, no object named "animation" in vanilla JS.
A way to code a fade-in and fade-out animation is to use the CSS property opacity.
If you were to code this animation in CSS, you could do:
#btn {opacity: 0.5; }
#btn:hover {opacity: 1}
Let me know if this is what you needed.

How can I control CSS transitions and animations with JS?

I have an image that goes from opacity 0 to 1 when a bit of text is hovered. I would like the transition to be smooth, something similar to CSS transition. Can't really figure out how to make this happen, so any help would be appreciated.
The JavaScript looks like this:
document.getElementById("text-hover").addEventListener("mouseover", imageTransition);
document.getElementById("text-hover").addEventListener("mouseout", imageTransitionOut);
function imageTransition() {
document.getElementById("pic").style.opacity = "1";
}
function imageTransitionOut() {
document.getElementById("pic").style.opacity = "0";
}

Just define the transition in css, it will trigger when you change the opacity value in javascript:
#pic {
transition: opacity .3s;
opacity: 0;
}
You don't need to change your javascript
Update
If you need to animate more than one property, it is better to define the animation in css and then trigger it from javascript by toggling a class on the element
the css:
#pic {
transition: all .3s;
opacity: 0;
transform: scale(.1);
}
#pic.animate {
opacity: 1;
transform: scale(1);
}
javascript:
var textHover = document.getElementById("text-hover");
var pic = document.getElementById("pic");
textHover.addEventListener("mouseover", function() {
pic.classList.add('animate');
});
textHover.addEventListener("mouseout", function() {
pic.classList.remove('animate');
});

Css animation - stop and revert animation

I want my custom element to move to the right for 200px when clicking a button. So the element starts moving on click. When in the animation I want to be able to click the button again to stop and let the element have an animated return to initial state (reverse animation from the current state).
I accomplished this with css transitions:
var state = false;
var button = document.getElementById("but");
button.onclick = clickA;
function clickA(){
state = !state;
var el = document.getElementById("el");
if (state) el.setAttribute("class", "animatedElement open");
else el.setAttribute("class", "animatedElement");
}
.animatedElement {
padding-left: 0px;
transition: padding-left 5s;
}
.open {
padding-left: 200px;
}
<button id="but">Click</button>
<div id="el">element</div>
So on click I just toggle the .open class on the component.
I want to know if this is possible to do with css animations? I tried this:
var state = false;
var button = document.getElementById("but");
button.onclick = clickA;
function clickA(){
state = !state;
var el = document.getElementById("el");
if (state) el.setAttribute("class", "animatedComponent-open");
else el.setAttribute("class", "animatedComponent-close");
}
#keyframes animationOpen {
0% {padding-left: 0px;}
100% {padding-left: 200px;}
}
.animatedComponent-open {
animation: animationOpen 3s normal forwards;
}
#keyframes animationClose {
0% {padding-left: 0px;}
100% {padding-left: 200px;}
}
.animatedComponent-close {
animation: animationClose 3s reverse forwards;
}
<button id="but">Click</button>
<div id="el">element</div>
But this doesn't revert open animation when clicked in the middle of animation, but jumps to the final state and then plays close animation from beginning.

As the keyframes have a starting point and and ending point, so they will start from those positions no matter where where the current position of the element is. Since you are using js to toggle, transitions are the way to go. Animations are just complicating it more without any benefits.

Visit https://css-tricks.com/controlling-css-animations-transitions-javascript/
I am sure this article will have the exact answer for you. There are many work arounds to get the current keyframe values at an animation playstate of pause.
Then with these values you can use the animate api to build a reverse animation.
If you can pass the reverse animation the pause keyframe values as starting-position values. Then you can set your animation end keyframes to paddingLeft:0px - just how it started.
This will solve the unwanted jumping to the end of the animation.

How to remove a div with fade out effect in JavaScript?

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

Smoothly change css

my situation is as follows:
I have the following function
var showHideMemberContent = function(){
if(isHidden === false){
$("#showHideMemberContent").text("Member Content");
$("#main").css("height","-=187");
$('#mainBottom').hide('slow', function() {
isHidden = true;
});
} else {
$("#showHideMemberContent").text("Verberg");
$("#main").css("height","+=187");
$('#mainBottom').show('slow', function() {
isHidden = false;
});
}
};
So when the function executes it hides the "mainBottom" div. The "main" div should decrease/increase its height.
It does so, but I need to know if there is a way to do this smoothly.
Thanks in regard.

You can use CSS to achieve this. Simply add this rule to your CSS declaration for #main:
#main {
-khtml-transition: height 0.3s ease;
-moz-transition: height 0.3s ease;
-ms-transition: height 0.3s ease;
-o-transition: height 0.3s ease;
-webkit-transition: height 0.3s ease;
transition: height 0.3s ease;
}
Here the height part defines the property to apply the transition to, the 0.3s defines the time it takes to transition from one state to another, and the ease property defines the function for the transition. Ease will slowly accelerate to 50% transition and then decelerate to 100%.
The advantage of using CSS over jQuery's animate function is that the CSS transform is hardware accelerated when supported, and will be smoother and more efficient. The disadvantage is that some antiquated browser versions will not support the effect, however it will simply fall back to a non-animated height change, rather than breaking.
To learn more about CSS transitions, follow the link below to Mozilla's article. They're a great reference for these sort of things and an excellent place to start learning, or even brush up on your knowledge. I've also included an example of this technique below.
MDN article on transitions.
Here is a jsfiddle example.

Yes, use jquerys animate() method, http://api.jquery.com/animate/.
Include jquery ui if you want to use easing types other than "linear" or "swing". Its passed as a second argument (string), to the animate method. https://jqueryui.com/easing/
Example (with jquery ui loaded):
$(selector).animate({ height: '200px' }, 'easeInOutCubic', function(){
/* animation comlete */
});
Also, work on your accept rate.

You can use animate for that:
var oldHeight = $("#main").height();
$("#main").animate({'height', oldHeight + 187}, { duration: 500, queue: false });

if you want to operate with css and classes, not the style attribute, you can use jquery-ui's switchClass() or toggleClass() methods http://docs.jquery.com/UI/Effects/switchClass http://jqueryui.com/demos/toggleClass/

Use animate()...
var showHideMemberContent = function(){
if(isHidden === false){
$("#showHideMemberContent").text("Member Content");
$("#main").animate({height:-=187}, 300);
$('#mainBottom').hide('slow', function() {
isHidden = true;
});
} else {
$("#showHideMemberContent").text("Verberg");
$("#main").animate({height:+=187}, 300);
$('#mainBottom').show('slow', function() {
isHidden = false;
});
}
};