We Keep Coding

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>

Javascript combine with my css to add an effect on imagechange

I want to change my images with javascript and add an fade effect.
This is my css for the fade effect:
var image=document.getElementById("image");
var currentPos = 0;
var images = ["foto1.jpg","foto2.jpg","foto3.jpg"]
function volgendefoto() {
if (++currentPos >= images.length) currentPos = 0;
image.src = images[currentPos];
}
setInterval(volgendefoto, 4100);
#map {
height:1000px;
width:1000px;
background:black;
}
#overlay {
z-index:2;
background:white;
height:1000px;
width:1000px;
opacity:0;
-webkit-transition: opacity 0.1s;
-ms-transition: opacity 0.1s;
-moz-transition: opacity 0.1s;
-o-transition: opacity 0.1s;
transition: opacity 1s;
margin-top:-1000px;
transition-delay: 0.1s;
-webkit-transition-delay: 0.1s;
}
#overlay:hover {
opacity:.8;
transition-delay: 0s;
-webkit-transition-delay: 0s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='map'>
<img id="image" src="foto1.jpg">
<div id='overlay'></div>
</div>
It is for a school project where we are making a responsive website, so I am going to add this to that site.

Tried your piece of code which gives fade-out effect for the image on hover.
[You can see the output below][1]
[1]: https://jsfiddle.net/cxLjLnu8/1/ "Output here"
Is this what you did and expected?
Which effect you are in need of fade-in
or fade-out?
and
do you need the effect on Hover or on sliding the images?

Highlight area with backgroundcolor fadein/fadeout

Hi I'd like to highlight .small. Do not have access to add jQuery UI e.g. can't use .animate.
HTML
<span class="small">10 left</span>
jQuery
$(".small").css("background-color","orange");
Question: How do I add background-color orange and make it .fadeOut() here? This below doesn't work? Only want to fadeout the background color, nothing else.
$(".small").css("background-color","orange").fadeOut();

you can use CSS animations to do that
see snippet below
span {
background-color:orange;
animation-name:bckanim;
animation-fill-mode:forwards;
animation-duration:3s;
animation-delay:0s;
}
#keyframes bckanim {
0% {background-color:orange;}
100% { background-color:transparent;}
}
<span class="small">10 left</span>

You can use timeouts and css transitions nicely for this.
For more information about transitions:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
$(document).ready(function(){
var $block = $('.block');
/** first timeout to make the document do its stuff before this thing runs **/
window.setTimeout(function() {
$block.addClass('orange-fade');
/** second timeout to turn it back to normal **/
window.setTimeout(function() {
$block.removeClass('orange-fade');
},2000);
},1000);
});
.block {
display:block;
width:200px;
height:200px;
background-color:green;
/** Transitions to give a nice effect **/
-webkit-transition: background-color 1000ms linear;
-moz-transition: background-color 1000ms linear;
-o-transition: background-color 1000ms linear;
-ms-transition: background-color 1000ms linear;
transition: background-color 1000ms linear;
}
.orange-fade {
background-color: #AD310B;
-webkit-transition: background-color 1000ms linear;
-moz-transition: background-color 1000ms linear;
-o-transition: background-color 1000ms linear;
-ms-transition: background-color 1000ms linear;
transition: background-color 1000ms linear;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=" block transition">
Look at me! Look at you! now look back to me! i'm on a horse!
</div>

You can do something like this with css transitions on a class and then add or remove the class with JS.
HTML:
<span class="small">10 left</span>
CSS:
.small {
background-color: #fff;
transition-property: background-color;
transition-duration: 1s;
transition-delay: 1s;
}
.orange {
background-color: orange;
}
JS:
$(".small").addClass("orange");
DEMO https://jsfiddle.net/ry5qxvos/

try this http://jsfiddle.net/x2jrU/92/ use this jquery to make background color of ur wish with fadein/fadeout option.
jQuery.fn.highlight = function() {
$(this).each(function() {
var el = $(this);
el.before("<div/>")
el.prev()
.width(el.width())
.height(el.height())
.css({
"position": "absolute",
"background-color": "#ffff99",
"opacity": ".9"
})
.fadeOut(500);
});
}
$("#target").highlight();
#target { width: 300px; height: 100px; border: 1px solid red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="target">Highlight Me</div>

Add transition while changing img src with javascript

I have an img tag that I want to change the src when hover and it all works but i would like to add some transition so it doesn't look so rough but since it's an img src i cant target it with css.
http://jsfiddle.net/Ne5zw/1/
html
<img id="bg" src="img/img1.jpg">
<div onmouseover="imgChange('img/img2.jpg'); "onmouseout="imgChange('img/img1.jpg');">
js
function imgChange(im){
document.getElementById('bg').src=(im);
}

You want a crossfade. Basically you need to position both images on top of each other, and set one's opacity to 0 so that it will be hidden:
<div id="container">
<img class="hidden image1" src="http://www.istockphoto.com/file_thumbview_approve/4629609/2/istockphoto_4629609-green-field.jpg">
<img class="image2" src="http://www.istockphoto.com/file_thumbview_approve/9958532/2/istockphoto_9958532-sun-and-clouds.jpg" />
</div>
CSS:
.hidden{
opacity:0;
}
img{
position:absolute;
opacity:1;
transition:opacity 0.5s linear;
}
With a transition set for opacity on the images, all we need to do is trigger it with this script:
$(function(){
debugger;
$(document).on('mouseenter', '#hoverMe', function(){
$('img').toggleClass('hidden');
});
});
http://jsfiddle.net/Ne5zw/12/

Here is a pure css solution using css transition. You can use a div as the container and set the background-image on hover.
.image-container {
background: url(http://placeholder.pics/svg/300x300/DEDEDE/555555/Old%20Image) center center no-repeat;
background-size: contain;
width: 150px;
height: 150px;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.image-container:hover {
background-image: url("http://placeholder.pics/svg/300x300/DEDEDE/555555/New%20Image");
}
<div class="image-container"></div>

Just in case someone is curious how to actually create a transition-like effect when you are actually changing the source attribute of an image, this was the solution I came up with.
Javascript:
var bool = false;
setInterval(() => {
bool = !bool;
let imgSrc = bool ? 'hero-bg2.jpg' : 'hero-bg.jpg'; // Toggle image
$('.parallax-slider').addClass('transitioning-src'); // Add class to begin transition
setTimeout(() => {
$('.parallax-slider').attr('src', `https://website.com/images/${imgSrc}`).removeClass('transitioning-src');
}, 400); // Ensure timeout matches transition time, remove transition class
}, 6000);
CSS:
.parallax-slider {
transition: opacity 0.4s ease-in;
-webkit-transition: opacity 0.4s ease-in;
-moz-transition: opacity 0.4s ease-in;
-ms-transition: opacity 0.4s ease-in;
-o-transition: opacity 0.4s ease-in;
opacity: 1;
}
.transitioning-src {
transition: opacity 0.4s ease-out;
-webkit-transition: opacity 0.4s ease-out;
-moz-transition: opacity 0.4s ease-out;
-ms-transition: opacity 0.4s ease-out;
-o-transition: opacity 0.4s ease-out;
opacity: 0;
}
This will give the illusion of 'fading to black and back' between images - even if you're using something like parallax.js where you have a data-attribute driven component that renders out into a dynamic image. Hope it helps someone.

Fixed Mister Epic solution's images in this jsfiddle.
HTML
<div id="container">
<img class="hidden image1" src="http://placeholder.pics/svg/300x300/DEDEDE/555555/Old%20Image">
<img class="image2" src="http://placeholder.pics/svg/300x300/DEDEDE/555555/New%20Image" />
</div>
<div id="hoverMe">hover me</div>
CSS
div#hoverMe {
background-color:yellow;
width:50px;
height:50px;
position:fixed;
top:300px;
}
div#container{
position:relative;
height:200px;
}
.hidden{
opacity:0;
}
img{
position:absolute;
opacity:1;
transition:opacity 0.5s linear;
}
JS
$(function(){
$(document).on('mouseenter', '#hoverMe', function(){
$('img').toggleClass('hidden');
});
});

Fade out / fade in effect with CSS3

I'm trying to create a fade out / fade in effect with CSS3 animations. Here is my CSS :
#buttonright, #buttonleft{
-webkit-transition:opacity 0.5s linear;
-moz-transition:opacity 0.5s linear;
-o-transition:opacity 0.5s linear;
-ms-transition:opacity 0.5s linear;
transition:opacity 0.5s linear;
}
And the Javascript (i'm using jquery) :
$('#buttonleft').css("opacity","0");
$('#buttonright').css("opacity","0");
$('#buttonleft').css("opacity","1");
$('#buttonright').css("opacity","1");
It looks like the browser think it's stupid to set the opacity to 0 then to set it back to 1. Does someone has a possible solution ?
Thank you.

Edit: Regard yaki's answer for a pure CSS3 solution.
You're not giving the browser enough time to complete the transition. If you add a setTimeout to the latter statements, it should work.
Something like this:
$('#buttonleft').css("opacity","0");
$('#buttonright').css("opacity","0");
setTimeout(function(){$('#buttonleft').css("opacity","1");}, 5000);
setTimeout(function(){$('#buttonright').css("opacity","1");}, 5000);

Actually accepted solution is not CSS3 solution (it's still requires some javascript code). Please check the code below.
html:
<a id='buttonleft'>Button left</a>
<a id='buttonright'>Button right</a>
css:
#buttonleft, #buttonright {
text-align: left;
background: rgb(180,180,255);
opacity:0.5;
/* property duration timing-function delay */
-webkit-transition: opacity 500ms linear 100ms;
-moz-transition: opacity 500ms linear 100ms;
-o-transition: opacity 500ms linear 100ms;
transition: opacity 500ms linear 100ms;
}
#buttonleft:hover, #buttonright:hover {
opacity: 1.0;
}

something like this?
$('#button').hover(
function() {
$(this).animate({opacity: 0}, 500);
},
function() {
$(this).animate({opacity: 1}, 500);
}
);

You can use CSS3 animations now that it is more supported than when you asked the original question. I've created a jsFiddle showing how to do this on hover.
#keyframes demo {
from {
animation-timing-function: ease;
opacity: 1;
}
50% {
animation-timing-function: ease-in;
opacity: 0;
}
to {
animation-timing-function: ease-inout;
opacity: 1;
}
}
img:hover
{
animation-delay: 0s;
animation-duration: 2s;
animation-iteration-count: 1;
animation-name: demo;
}