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)

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.

Using jQuery, how can I change the size of a div as I scroll?

I have a div that is 500px wide in a container that is 3500px high, and I want the 500px div to slowly decrease in width to half its original width as I scroll down the page. Everything I've tried with .scroll in jQuery is making the width change as soon as the page loads instead of as the page is scrolled down.
EDIT I'd like the width to scale up and down as the page is scrolled up and down.
Here's an example of what I started with, I know it's obviously not correct:
$(document).ready(function() {
$('#box').scroll(function() {
$('#box').css('width', '250px');
});
});

Here is working fiddle, that dynamically changes it's width http://jsfiddle.net/CWe9t/1/
$(document).ready(function () {
var initialWidth = $("#box").width();
var minWidth = 250;
$(document).scroll(function () {
var x = initialWidth - (minWidth * ($(window).scrollTop()) / $("#box").height());
$('#box').css('width', x);
});
});

$(window).scroll(function() {
$( "#box" ).animate({
width: '250px'
}, 5000, function() {
// Animation complete.
});
});

Are you calling scroll function on your box scrolling? No, it's window you are calling scroll function
$(document).ready(function() {
$( **window** ).scroll(function() {
$('#box').css('width', '250px');
});
});
and about slowly decrease size apply this css3 properties on your box
#box
{
-webkit-transition: width 0.5s ease-in-out;
-moz-transition: width 0.5s ease-in-out;
-o-transition: width 0.5s ease-in-out;
-ms-transition: width 0.5s ease-in-out;
transition: width 0.5s ease-in-out;
}
apply css3 animation as it is more smoother to animate if many animations on same page same time and Jquery animation if that's only one simple animation as told by #daguru.

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();
});
});
}); ​

How do I fade in a div that has a set opacity?

I have a div filled with info at this blog and I have it set at a certain opacity using CSS. How would I have it "fade in" using jQuery to 90 or 100% on hover of that div?
.infoHolder2 {
position:absolute;
color:#FFF;
background:#9f9377;
padding:15px;
padding-top:23px;
z-index:5;
width:97.7%;
bottom:8px;
margin:-8px;
opacity:0.2;filter:alpha(opacity=20)
}
<div class="infoHolder2"><div id="title">I'm {Title} and I like <span id="stuff"></span>.
</div><img id="portrait" src="{PortraitURL-128}"><img id="portraitCover"
src="http://static.tumblr.com/ux4v5bf/3Uolhxkyl/cover.png">
<div id="infoHolder">{Description}</div></div>

Try jquery fadeto().
This should do the trick (fade to 90% in 500 ms):
$(".infoHolder2").fadeTo(500, 0.9);

I think that the following should work:
$('.infoHolder2').fadeTo(500,'1');
It's worth noting the order of the arguments in the fade() method, duration is first, followed by the value of the desired opacity. For some reason I always get them mixed up when writing them down. Thanks #alex for the comment.
You could, also, if you wanted to, use:
$('.infoHolder2').animate({'opacity':'1'},500);
But, unless you're animating other properties, it becomes a little less concise for the same effect.
JS Fiddle demo to cover both options.
References:
fadeTo(),
animate().
Edited in response to OP's requirements to run this on hover()
$('ul li').hover(
function(){
var which = $(this).index();
if (which == 0){
$(this).fadeTo(500,'1');
}
else {
$(this).animate({'opacity':'1'},500);
}
},
function(){
$(this).fadeTo(500, 0.5);
}
);
JS Fiddle demo.

Use jQueries fadeTo
Usage
http://api.jquery.com/fadeTo/
fadeTo(duration, opacity)
Example
//90% Opacity
$('.infoHolder2').fadeTo("slow", 0.90);
//100% Opacity
$('.infoHolder2').fadeTo("slow", 1);
On Hover
$('.infoHolder2').hover(
function(){
$(this).fadeTo('slow', 0.90);
},function(){
$(this).fadeTo('slow', 0.50);
}
);
Live Demo

You can use fadeTo().
To fade to 90% opacity, use this...
$('.infoHolder2').hover(function() {
$(this).fadeTo(1000, 0.9);
}, function() {
$(this).fadeTo(1000, 0);
});
jsFiddle.

also by CSS3 without using jquery
.image {
position: relative;
overflow: hidden;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
opacity:1;
filter:alpha(opacity=100);
}
.image:hover {
opacity:0;
filter:alpha(opacity=0);
}