We Keep Coding

Removing and adding a class through javascript smoothly

I am trying to create this animation where the title is visible in the page initially then when you scroll down you trigger the title to slowly fade away and a subtitle fades in right after. I have the title part working but I can't seem to get the subtitle to appear with a smooth transition. At first I have my subtitle at "visibility:hidden" then when I scroll and the javascript adds the transition in class, it just abruptly comes in disregarding the transition property I gave it. Here is the fiddler I set up. Below is the javascript and css (respectively) i'm using to get this animation to work. Of course if there area any easier ways to achieve this feel free to let me know. Any advice or help will be GREATLY appreciated I have been researching and trying things to no avail.
Javascript
const element = document.getElementById('title');
const element2 = document.getElementById('subtitle');
window.onscroll = function() {
console.log("document element");
console.log(document.documentElement.scrollTop);
console.log("scrolling elemnent");
if (window.scrollY > 0) {
element.classList.add('fadeout');
element2.classList.add('fadein');
console.log("hello");
}
}
.fadeout {
visibility: hidden;
opacity: 0;
transition: visibility 0s 2s, opacity 2s linear;
}
.two {
visibility: hidden;
}
#subtitle {
transition: opacity 2s linear;
}
.fadein {
visibility: visible;
opacity: 1;
transition: opacity 2s linear;
}

Currently your subtitle is at full opacity when you are fading it in (Because the visibility property does not set the opacity it just makes the element invisible)
Add opacity:0; to the .two CSS so that it will fade in.
Updated fiddle https://jsfiddle.net/s2cban6q (line 32 of CSS changed)

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'});

How can I highlight a specific div from a hash in the URL?

When a user comes to a website via www.example.com/#div4, I would like the division specified in the URL to be highlighted with #F37736 (orange) and then within 2 seconds transition smoothly back to #00A087 (the default color).
The div to be highlighted as a class of "fixed-nav-bar".
What I've tried:
var hash = false;
checkHash();
function checkHash(){
if(window.location.hash != hash) {
hash = window.location.hash;
} t=setTimeout("checkHash()",400);
};

You could look for the hash, then target the division by it's class name. You'll immediately change the color of the div to your orange color, then animate it back to your default color.
You will need to include the jQuery Color library to animate the background-color though, as vanilla jQuery cannot animate background-color. You can also use jQuery UI's highlight effect, thought the UI library is a little heavier in size.
$(document).ready(function () {
var hash = window.location.hash;
$('.' + hash).css('background-color', '#F37736').animate({
backgroundColor: '#00A087'
}, 2000);
});

This can be solved with just CSS using the :target pseudo-class. It allows you to highlight the item that has an ID matching the hash in your URL. A very simple example of this would be:
div {
background-color: #00A087;
}
div:target {
background-color: #F37736;
}
By default, a div would have a default colour but on finding a match it would switch to something different. To make it work in the way you specified, just sprinkle a bit of animation magic:
div {
background-color: #00A087;
}
div:target {
background-color: #F37736;
animation-delay: 2s;
animation-fill-mode: forwards;
animation-duration: 4s;
animation-name: highlight;
animation-timing-function: ease-in-out;
}
#keyframes highlight {
from {
background-color: #F37736;
}
to {
background-color: #00A087;
}
}
Here I've set the animation to delay for 2 seconds and to maintain the final state of the animation.
With the various properties available you can mix and match to make it work a little differently but this would achieve what was being asked in the question.
Example on CodePen

I'm assuming that, you wanna highlight the background color on some events.
Try adding this css to your code. This will highlight background color on hover.
.fixed-nav-bar {
background-color: #f37736;
}
.fixed-nav-bar:hover {
background-color: #00a087;
-webkit-transition: background-color 2000ms linear;
-moz-transition: background-color 2000ms linear;
-o-transition: background-color 2000ms linear;
-ms-transition: background-color 2000ms linear;
transition: background-color 2000ms linear;
}
Hope this will help you.

How to hide/show the div using javascript with transition ease-in-out effect?

This is my code which hide/show the div...but I want transition effect while hide/show in javascript like ease-in-out. How to achieve this in javascript?
function showHide(shID) {
if (document.getElementById(shID)) {
if (document.getElementById(shID + '-show').style.display != 'none') {
document.getElementById(shID + '-show').style.display = 'none';
document.getElementById(shID).style.display = 'block';
window.scrollTo(0, 2346);
}
else {
document.getElementById(shID + '-show').style.display = 'inline';
document.getElementById(shID).style.display = 'none';
}
}
}

I am not sure, why you are not using CSS3 transitions.
But to keep it all strictly javascript probably this source code is helpful:
https://github.com/jquery/jquery/blob/master/src/effects.js#L107

As has been pointed out, you should use CSS3 transitions if you want to do this in a standard way which will also not cause a lot of trouble because of high maintenance.
However, the problem then is you're trying to use a transition on a property with no quantifiable transitional values. There is no middle ground between display: block; and display: none; so you must use something which does have transitional values. Usually a property such as width or height is appropriate, but you can also use it on opacity, left, top, etc. (so basically any property with a numeric value).
This CSS is for an element which fades and slides in and out of a document from the top.
.panel {
position: absolute;
top: 0px;
opacity: 0;
-moz-transition: opacity .25s ease-in-out , top .25s ease-in-out;
-o-transition: opacity .25s ease-in-out , top .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out , top .25s ease-in-out;
transition: opacity .25s ease-in-out , top .25s ease-in-out;
}
.panel.show {
top: 50px;
opacity: 100;
}
Here's a Javascript that goes through the elements, checks for a data-toggle attribute, and assigns a click handler if it finds it. The handler toggles the show class for the targeted element.
function toggleElem(evt) {
var cn = 'show';
var panel = document.getElementById(evt.target.getAttribute('data-toggle'));
var classes = panel.className.split(/\s+/);
var x = classes.indexOf(cn);
if(x >= 0)
{ classes.splice(x,1); }
else
{ classes.push(cn); }
panel.className = classes.join(' ');
}
var elems = document.body.getElementsByTagName('*');
for(var i=0,l=elems.length;i<l;i++) {
var elem = elems[i];
var toggle = elem.getAttribute('data-toggle');
if(toggle !== null)
{ elem.addEventListener('click',toggleElem,false); }
}
Example HTML.
<input type="button" data-toggle="foo" value="Toggle"/>
<div id="foo" class="panel">
<p>This is a transitioned panel.</p>
</div>
Because of the fact you would be using opacity instead of display you may also run into the snag that the element you want to toggle, though invisible, will still be there as far as your cursor is concerned. You may then want to use setTimeout() to change the display value in addition to performing the class change to keep your transitioned element from catching input when hidden.

Background images opacity fades out the whole element

I have a div element with background image, I'm trying to fade in and out background images with Jquery.
By now the function works well but it fades out the whole div and not only the background as I wish.
function rentPics()
{
$('#d2').css('background-image','url(' + mazdaArr[1] + ')');
interID=setInterval (changeImage,3000);
}
function changeImage()
{
$('#d2').animate({opacity: 0}, 1500, function(){
$('#d2').css('background-image', 'url(' + mazdaArr[x] + ')');
}).animate({opacity: 1}, 1500);
x++;
if (x==mazdaArr.length)
{
x=1;
}
}

If you're looking for a simple and lightweight cross-fading, use the CSS transition. This won't affect the text inside the element, the border and the box-shadow.
transition: background-image 1s ease-in-out;
-webkit-transition: background-image 1s ease-in-out;
-moz-transition: background-image 1s ease-in-out;
-ms-transition: background-image 1s ease-in-out;
-o-transition: background-image 1s ease-in-out;
Check out this fiddle.
It's supported by Chrome, Safari and Opera but I'm not quite sure with Firefox and IE
If you have a larger list of images to loop. You may also want to consider caching the images URL first because I noticed some flickering/blinking on first use. Check solutions here - Preloading CSS Background Images

The fade in applies opacity to the entire div with the background image incluide, you can do this creating a layer behind the div that you want apply the fade in and fade out.

Instead of using jQuery to animate opacity, you could have it add or remove a class. Then add transitions to your CSS, which should produce your desired result. Something like below might work. You can see the documentation of CSS transitions here. The only drawback is IE, per usual.
.element {
-webkit-transition: ease 0.2 all;
-moz-transition: ease 0.2 all;
-o-transition: ease 0.2 all;
-ms-transition: ease 0.2 all;
transition: ease 0.2 all;
}

Use a relative container with an absolute positioned overlay. Your HTML should look like this:
<div id="d2" class="image-wrapper">
<img src="/img/1.jpg" />
<div class="overlay"> your text goes here </div>
</div>
... and your CSS:
.image-wrapper {
position: relative;
}
.image-wrapper .overlay {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
overflow: auto;
}
.image-wrapper img {
display: block;
}
Now you can change the opacity of your image without changing the content within the ovelay.