Develop Reference

Javascript/jquery, why does my fadein/fadeout not work?

I have searched and looked through a lot of posts and seen a lot of answers, tried them with no luck.
I got it working with jquery color animation, but then i have to link another library which id like to avoid.
I tried the CSS animation which i couldnt make work, because when i remove the css class it doesnt get the chance to make the fadeout effect..
It is only the fadein/fadeout effect that doesnt happen. The background color switches correctly.
TL;DR: Want my top navigation bar to go from transparent background to white background when visitor has scrolled X amount from top, and then back to transparent when visitor is close to top of page with a smooth transition effect.
$(document).ready(function(){
$(document).scroll(function(){
if ($(this).scrollTop() > 200) {
if ($("#topnav").hasClass('transparent')){
$("#topnav").removeClass('transparent');
$("#topnav").addClass('black').fadeIn(1000);
}
} else if ($(this).scrollTop() < 200) {
if ($('#topnav').hasClass('black')){
$('#topnav').removeClass('black');
$('#topnav').addClass('transparent').fadeIn(1000);
}
}
});
});
why doesnt this work?

You can simply set the background color with CSS, and use CSS transition to achieve the fade in / fade out effect.
.box {
background-color: black;
-webkit-transition: background-color 2s;
transition: background-color 2s;
}
And in Javascript you can set the color:
if ($(this).scrollTop() > 200) {
$("#topnav").css({"background-color", "yellow"});
}
jsfiddle

Try out this simple example
In Your CSS file,
.transparent-background {
background-color: transparent;
-webkit-transition: background-color 1000ms ease;
-ms-transition: background-color 1000ms ease;
transition: background-color 1000ms ease;
}
.black-background {
background-color: black;
-webkit-transition: background-color 1000ms ease;
-ms-transition: background-color 1000ms ease;
transition: background-color 1000ms ease;
}
And in your js file just add class before that attach transparent-background class to topNav container
$(document).ready(function(){
$(document).scroll(function(){
if ($(this).scrollTop() > 200) {
$("#topnav").removeClass("transparent-background").addClass('black-
background')
} else {
$("#topnav").removeClass("black-
background").addClass('transparent-background')
}
});
});

Javascript - changing background color opacity with time interval

I am trying to add the background color to a .top-barz element when I click on another element, but I would like to make that as an animation in duration of 1s. I am pretty new to javascript and not sure how to do that?
I would like to animate from change opacity of rgba(36,36,36, .1) to rgba(36,36,36, 1)
I have come up with this code and put it into my on click function, but this is obviously not working:
var topBar = setInterval(function(){ topBarBackground() }, 1000);
function topBarBackground() {
for (var i = 1; i <= 9; i++) {
$('.top-barz').css('background-color', 'rgba(36,36,36,.' + i + ')');
}
}
clearInterval(topBar);

You may consider the fadeIn function of jQuery.
$('.top-barz').fadeIn(10000);

Here is some sample code to get you started
JQuery
$('.button').on('click', function() {
$('.top-barz').addClass('new-color');
});
CSS
.top-barz {
background-color:#000;
-webkit-transition: background-color 1s linear;
-moz-transition: background-color 1s linear;
-o-transition: background-color 1s linear;
-ms-transition: background-color 1s linear;
transition: background-color 1s linear;
}
.top-barz.new-color {
background-color:#eee;
}
Obviously you would change the colors to whatever color you want for your design.
EDIT
Here is the Fiddle
Seems to be working fine in chrome on my end

Michael McCoy is totally right in his comment. I would do the same as you will also benefit from GPU acceleration if you use CSS and it will make your code lighter.
This apart, your code has 2 errors:
missing i++
missing var i
_
function topBarBackground() {
for (var i = 1; i < 9; i++) {
$('.top-barz').css("background-color", "rgba(36,36,36,." + i + ")");
}
}
var myVar = setInterval(function(){topBarBackground()}, 1000);
Anyway, drop this idea.
So to add class just do $('.top-barz').addClass('changedColor');
and in css:
.top-barz {
background-color: rgba(36,36,36,.1);
-webkit-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
.top-barz.changedColor {
background-color: rgba(36,36,36,1);
}

Enable hover event after certain time [duplicate]

This question already has answers here:
How to add delay to jquery mouseover? [duplicate]
(5 answers)
Closed 7 years ago.
I would like to disable hover event on an anchor tag via jQuery for a certain interval.
example: I've got some CSS styles for a hover effect on anchor (< a href="">) element. When I hover the element I want it to wait certain time (500ms or so) and then to start rendering the hover effect.
Something like this maybe?
$("#navigation").hover(function () {
$("li.has-submenu").off('hover');
setTimeout(function () {
$("li.has-submenu").on('hover');
}, 1000);
});

I checked recently, and it's 2015, this means that you can use CSS3 for this.
The following will start animating background color of all links after 500ms.
No jQuery or any JavaScript needed.
a {
-webkit-transition: all 500ms ease-in;
-moz-transition: all 500ms ease-in;
-ms-transition: all 500ms ease-in;
-o-transition: all 500ms ease-in;
transition: all 500ms ease-in;
}
a:hover {
background-color: #c00;
transition-delay: 500ms;
}
Hover me
If, however you absolutely need to do that with JavaScript, you can use setTimeout in to apply a hovered class to the element:
jQuery(function($) {
$("a").hover(function() {
var el = $(this);
var timeout = setTimeout(function() {
el.addClass("hover");
}, 500);
el.data("timeout", timeout);
}, function() {
clearTimeout($(this).removeClass("hover").data("timeout"));
});
});
a {
-webkit-transition: all 500ms ease-in;
-moz-transition: all 500ms ease-in;
-ms-transition: all 500ms ease-in;
-o-transition: all 500ms ease-in;
transition: all 500ms ease-in;
}
a.hover {
background-color: #c00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Hover me

I guess you want something like this:
<div id='a' style="border:2px solid black" >
<h3>Hove On me</h3>
For 2000 milliseconds. You will get an alert.
</br>
</div>
$(document).ready(function(){
var delay=2000, setTimeoutConst;
$('#a').hover(function(){
setTimeoutConst = setTimeout(function(){
/* Do Some Stuff*/
alert('Thank You!');
}, delay);
},function(){
clearTimeout(setTimeoutConst );
})
})
DEMO: http://jsfiddle.net/faj81qa0/

how can I fade in and slide a div from onclick with delay

I'm struggling with this javascript as I'm just a designer and would like some help
I have got this code to make it slideIn when I click a button from another page but how can I get it to also fadeIn as it slides In?
This is the site if you want to see it working. If you click on 'portfolio' you will see the slidIn effect with a delay
www.jacintodematos.co.uk
<script>
function slideIn(el){
var elem = document.getElementById(el);
elem.style.transition = "left 0.5s ease-in 0.8s";
elem.style.left = "0px";
}
</script>
PORTFOLIO

You change the left for transition to all so along with left it'll work for opacity too.
I presume the element has a left so it's out of the visible window and opacity of 0 so we can fade in. Then we just need to change elements opacity to 1.
And finally not sure what you mean by delay, but if you want the whole fadeIn to happen after a specific delay, put it inside setTimeout.
function slideIn(el) {
setTimeout(function () {
var elem = document.getElementById(el);
elem.style.transition = "left 2s ease-in-out, opacity 4s linear";
elem.style.left = "0px";
elem.style.opacity = 1;
}, 1000);
}
jsfiddle DEMO (updated)
EDIT:
To control the time use the time parameter in transition:
transition: left 2s easi-in-out;
2s means 2 seconds, if it's too slow make it 1.5s or lower, if it's fast make it 2.5s or 3s or anything.
If you want to have different transitions for different styles separate them with comma:
elem.style.transition = "left 2s ease-in-out, opacity 4s linear";
ease-in-out to have smoother start AND end.

Triggering CSS transitions on page load with delays

So I've successfully tested a css fade-in transition effect of two images using the following Javascript as a trigger so it starts when the page loads (and NOT on hover or click). Now how can I add a 10 second delay to the start of the transition? I was hoping a simple "transition-delay: 10s;" would do the trick but it seems to be getting ignored. I don't want to use key frame animations because it's not compatible with older browsers.
Here's the script:
<script type="text/javascript">
window.onload = function(){
document.body.setAttribute("class", document.body.getAttribute('class') + " loaded");
}
</script>
Here's my CSS:
#MountainsBkg1 img {
width: 2348px;
opacity: 1;
position: absolute;
left: 0;
-webkit-transition: opacity 3s;
-moz-transition: opacity 3s;
-o-transition: opacity 3s;
transition: opacity 3s;
transition-delay: 10s;
}
#builder-layout-52bf21c0ea5ff.loaded #MountainsBkg1 img {
opacity:0;
}

The correct function would be:
window.onload = setTimeout(function(){document.body.setAttribute("class", document.body.getAttribute('class') + " loaded");}),10000)
If you're looking for a javascript only answer for this (that works on everything).
I'm also assuming that this is only going to be applied on the initial load of the page.