Add animation when opening & closing Div element - javascript

I have this page with menu-link (#navBtn), and #mobileLinks div that opens and closes when clicking #navBtn.
I would like to add fade-in animation when #mobileLinks div is opened, and fade-out animation when the #mobileLinks div is closed. I would like to achieve this with pure JavaScript.
I managed to insert the fade-in animation already, but don't know how to add the fade-out animation as well.
var content = document.getElementById("mobileLinks");
var button = document.getElementById("navBtn");
button.onclick = function(){
if(content.className == "open"){
content.className = "";
content.animate([{opacity:'0.0'}, {opacity:'1.0'}],
{duration: 1500, fill:'forwards'})
} else{
content.className = "open";
}
};
#navBtn
#mobileLinks {
display: none
}
#mobileLinks.open {
display: flex;
}

You can handle the styles entirely in CSS, and only toggle a class with Js.
With CSS & Js
const menu = document.getElementById("menu")
function toggleMenu() {
menu.classList.toggle("isOpen");
}
#menu {
opacity: 0;
transition: opacity 0.2s ease-out;
}
#menu.isOpen {
opacity: 1;
}
<a onClick="toggleMenu()">menu</a>
<nav id="menu">
<a>link</a>
<a>link</a>
</nav>
Or with JS only
const menu = document.getElementById("menu")
menu.style.opacity = '0'
menu.style.transition = "opacity 0.2s ease-out"
function toggleMenu() {
// Toggle between 0 and 1
menu.style.opacity ^= 1;
}
<a onClick="toggleMenu()">menu</a>
<nav id="menu">
<a>link</a>
<a>link</a>
</nav>

You can achieve it using jquery effect
To show your element, use fadeIn() and to hide an element, you can use fadeOut()
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeOut();
$("#div3").fadeToggle();
});
});
</script>

You can do it with JS. You can change the opacity of the element to hide it and along with css transition property to make fade effect
var container = document.getElementById("container")
function clicked() {
if (container.style.opacity == 0) {
container.style.opacity = 1
}
else {
container.style.opacity = 0
}
}
#container {
opacity: 0;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
<div id="container">Some Text</div>
Submit

Related

how to fade in and out with javascript

I am trying to make a message appear if the user doesn't scroll for specific amount of time and then make the text fade out as soon as the user scroll. What I have tried so far is not working.
I am looking for vanilla javascript solutions only.
thank you for your help.
// make scroll button appear ---------------
var scrollText = document.getElementById("scrollMsg");
function showMsg() {
scrollText.className = "show";
}
setTimeout(showMsg, 2000);
// make scroll button fadout ---------------
function scrollHide() {
var scrollText2 = document.querySelector("#scrollMsg.show");
var scrllTPosition = scrollText2.getBoundingClientRect().top;
var screenPosition = window.innerHeight / 0.5;
if (scrllTPosition < screenPosition) {
scrollText2.classList.add("scrollHide");
}
}
window.addEventListener("scroll", scrollHide);
#scrollMsg {
height: auto;
position: sticky;
bottom: 175px;
z-index: 1;
opacity: 0;
-webkit-transition: opacity 0.7s;
-moz-transition: opacity 0.7s;
transition: opacity 0.7s;
}
#scrollMsg.show {
opacity: 1;
-webkit-transition: opacity 0.7s ease-in-out;
-moz-transition: opacity 0.7s ease-in-out;
transition: opacity 0.7s ease-in-out;
}
#scrollhide {
opacity: 0;
-webkit-transition: opacity 0.7s ease-in-out;
-moz-transition: opacity 0.7s ease-in-out;
transition: opacity 0.7s ease-in-out;
}
<p id="scrollMsg">scroll</p>
I've added some large divs to allow us to scroll through the document.
// make scroll button appear ---------------
var scrollText = document.getElementById("scrollMsg");
window.addEventListener('scroll', (e) => {
console.log('user scrolled!')
scrollText.style.opacity = 0
});
#scrollMsg {
opacity: 1;
transition: opacity 1s;
}
<div style="height:100px"></div>
<p id="scrollMsg">scroll</p>
<div style="height:4000px"></div>

Slide first image from bottom and transition fade into second

I have an ordinary front page where I would like to have 2 background images alternating (fade between transition) in the center at the top.
Its all good but when first image is loaded it will slide from the left but I need to slide it from bottom. How can I do it?
Flickering after first image occurs only in JSFiddle for some reason, in localhost is fine.
<div id="frontpage-carousel">
<div class="container text-center">
something something
</div>
</div>
#frontpage-carousel {
transition: background 1.5s linear;
-webkit-transition: background 1.5s linear;
-moz-transition: background 1.5s linear;
-o-transition: background 1.5s linear;
-ms-transition: background 1.5s linear;
}
.first {
background: #000 url(http://placehold.it/350x420) no-repeat top center;
}
.second {
background: #000 url(http://placehold.it/350x350) no-repeat top center;
}
JS code here only periodically changes class of div
(function($) {
setTimeout(function (){
var images = ['first', 'second'];
var classIndex = -1;
function changeBackground() {
// Grab the element
var main = $("#frontpage-carousel");
// If this isn't the first time, remove the previous class
if (classIndex >= 0) {
main.removeClass(images[classIndex]);
}
// Update the index, wrapping around when we reach the end of the array
classIndex = (classIndex + 1) % images.length;
// Add the new class
main.addClass(images[classIndex]);
}
changeBackground();
setInterval(changeBackground, 3000);
}, 1000);
})(jQuery);
https://jsfiddle.net/uxvjgavt/3/
css:
add this to #frontpage-carousel style block :
background-position: bottom center;
js: and the following to your js :
// Add the new class
main.addClass(images[classIndex]).css({'background-position': 'top center'});

fade in then fade out after some time by using css-transitions

I'd like to fade in, wait some time, then fade out an element of homepage using jQuery's addClass and removeClass
This JS-code fades in the div but doesn't fade it out. I'm using jQuery 2.1.3
if ($("#save-success").hasClass("fadeout")){
$("#save-success").removeClass("fadeout").addClass("fadein", function() {
$(this).delay(2000).removeClass("fadein").addClass("fadeout");
})
}
I've got this CSS:
.fadein, .fadeout {
opacity: 0;
transition: opacity 0.4s ease-in-out;
}
.fadein {
opacity: 1;
}
this HTML:
<div id="save-success" class="fadeout">
Successfully saved
</div>
addclass() method doesn't take callback as argument. Try this instead:
if ($("#save-success").hasClass("fadeout")) {
$("#save-success").removeClass("fadeout").addClass("fadein");
setTimeout(function () {
$('#save-success').removeClass("fadein").addClass("fadeout");
}, 2000);
}
jsfiddle: http://jsfiddle.net/gwugyo4v/
You should change your CSS
.fadeout {
opacity: 0;
transition: opacity 0.4s ease-in-out;
}
.fadein {
opacity: 1;
transition: opacity 0.4s ease-in-out;
}
Without Classes
if ($("#save-success").hasClass("fadeout")){
$("#save-success").fadeIn(400, function() {
$(this).delay(2000).fadeOut(400);
});
}

Unset element visibility, change innerHTML, and transisition back

I have an element on my HTML page that I want to give dynamic content, and I want inserted HTML to transition from 0% to 100% opacity.
HTML
<div id="content"></div>
CSS
#content {
opacity: 1;
transition: opacity .5s ease-out;
-moz-transition: opacity .5s ease-out;
-webkit-transition: opacity .5s ease-out;
}
#content.hide {
opacity: 0;
}
JavaScript
function setContent(html) {
var content = document.getElementById("content");
//Set hide class
content.className += " hide";
//Set HTML
content.innerHTML = html;
//Unset hide class
content.className = content.className.replace(/(?:^|\s)hide(?!\S)/g, '');
}
Note that setContent() sets and then unsets the hide class. However, it seems that the browser (Chrome at least) does not invalidate content element until after it return from the function, so the element does not get the chance to transistion. How can I make sure that the animation plays?
EDIT: To be clear, setContent() is called after the DOM is loaded. Imagine an app that clears and repopulates the screen when some action occurs.
Can you be more clear as what the context of this is?
Also where are you calling the function? Is the place where you are calling the function inside a DOM ready function?
In jQuery it would be something like this:
$(document).ready(function(){
//call the function inside here.
});
What about using animations?
#content {
padding-left: 32px;
padding-right: 32px;
animation: fadein 0.5s;
-moz-animation: fadein 0.5s;
-webkit-animation: fadein 0.5s;
}
#keyframes fadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
#-moz-keyframes fadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
#-webkit-keyframes fadein {
from {
opacity:0;
}
to {
opacity:1;
}
}

Delete button on hover event

I'm having real problem with a hoverIntent.
http://jsfiddle.net/5fwqL/
What I want:
When hovering over the text for about 500ms I want the deletetext to show.
If I press the deletebutton i want the text to be deleted
If I go out of the text without pressing deletetext I want it to hide()
javascript
$(document).on({
mouseenter: function () {
mouse_is_inside = true;
$(this).next().slideDown();
},
mouseleave: function () {
mouse_is_inside = false;
$(this).next().hide();
}
}, '.title');
$('.deleteLink').on('click', function() {
$(this).prev().remove();
});
html
<div>
<div class='title'>TitleText</div>
<div class='delete'><a class='deleteLink' href="#">delete...</a></div>
</div>
** Forgot to mention that It has to work in IE8, so I have to use old style! **
Have a look at this fiddle
http://jsfiddle.net/joevallender/42Tw8/
You can use CSS to handle showing and hiding the delete link. Say you nested your HTML like this
<div class='title'>
TitleText 1
<a class='delete' href="#">delete...</a>
</div>
Then you can use CSS like this
.delete{
color: red;
display: none;
}
.title:hover .delete {
display:block
}
It's quite a common pattern for things like delete/edit links actually. The .title:hover .delete means the CSS the .delete will have when a parent .title is being hovered on. You could have also added an arbitrary class to your parent in your example and used that if you wanted to keep the same HTML arrangement.
Then use the JS below to handle the click
$(document).ready(function(){
$('.delete').click(function(){
$(this).parent().remove();
return false;
});
});
Does that make sense? It's slightly differently arranged to your starting point
EDIT
For the fade in/out I mentioned in the comment, you could use something like this
.delete{
color: red;
opacity:0;
transition:opacity 0.5s linear;
-moz-transition: opacity 0.5s linear;
-webkit-transition: opacity 0.5s linear;
}
.title:hover .delete {
opacity: 1;
transition:opacity 2s linear;
-moz-transition: opacity 2s linear;
-webkit-transition: opacity 2s linear;
}​
EDIT2
Changed the above code to use different transition times for fade in and fade out
$(document).ready(function() {
$(".title").hover(
function() {
$(this).data("mouse_hover", true);
var self = $(this);
setTimeout(function() {
if (self.data("mouse_hover") === true) {
self.next(".deleteLink").show();
}
}, 500);
},
function() {
$(this).data("mouse_hover", false).next(".delete").hide();
}
);
$(".deleteLink").click(function(e) {
e.preventDefault();
$(this).text("deleted").prev(".title").slideUp(function() {
$(this).hide();
});
});
}); ​

Categories