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

Bootstrap navbar fly in effect

I am trying to an achieve an effect like the one demonstrated here:
http://templateocean.com/stamp/image-bg/1-home-style-one/index.html
The navbar flies in after you scroll to a certain position.
I used this script as a baseline:
//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
if ($(".navbar").offset().top > 50) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
} else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
}
});
css:
#media(min-width:767px) {
.navbar {
padding: 20px 0;
-webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
-moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
transition: background .5s ease-in-out,padding .5s ease-in-out;
/* display: none;*/
}
.top-nav-collapse {
padding: 0;
display: block;
}
}
This changes the navbar height. I played around with the 'display:' parameter and it works to an extent; however, the navbar was popping up without the nice slide effect.
I tried to use this script:
https://api.jqueryui.com/slide-effect/
so I changed the original code to:
(window).scroll(function () {
if ($(".navbar").offset().top > 50) {
$("#navbar-top").toggle("slide");
} else {
$("#navbar-top").toggle("slide");
}
});
Now, however, I am getting the following error:
Uncaught TypeError: Failed to execute 'scroll' on 'Window': 2
arguments required, but only 1 present.custom.js:22 (anonymous
function)
What I am doing wrong? Do I have to really use JS for the slide effect? Can I use some other CSS attributes to achieve the same effect?

Make sure that you load jquery before the other js scripts.

Why does my background flash white when I change the css background property with a transition set?

I have the following code for my background:
.contact {
#include background(linear-gradient(#3e72ab, #39699d));
color: #fff;
display: none;
height: 500px;
transition: background 1s linear;
-moz-transition: background 1s linear; /* FF 4 */
-webkit-transition: background 1s linear; /* Safari & Chrome */
-o-transition: background 1s linear; /* Opera */
-webkit-backface-visibility: hidden;
And the following JavaScript to change the background when a submit button is clicked:
$(".contact input[type='submit']").click(function() {
$(".contact").css({"background":"#2ea930"});
});
But when I click the submit button there's a white flash. Why is this caused? It flashes white then to green as intended. How do I stop this?

The flash to white happens when the CSS changes and is reloaded. The white flash you see is the transition during the microseconds it takes to rewrite the CSS.
I recommend to layer your transition on top of another background. The "white flash" is really .contact element being fully transparent for a split second.
Pseudo code:
.baseBackground {
background: linear-gradient(#3e72ab, #39699d);
}
.contact {
background: linear-gradient(#3e72ab, #39699d);
}
/* On change for .contact */
.contact {
background-color: #2ea930;
}
<div class="baseBackground">
<div class="contact"> This div changes </div>
</div>

css3 or jquery opacity animation effect

Ok I have this code for the html.
<a class="fade fade1" href="#"></a>
<a class="fade fade2" href="#"></a>
<a class="fade fade3" href="#"></a>
and this css for those html element above
a.fade
{
width: 249px;
height: 90px;
float: none;
clear: both;
margin: 8px auto;
overflow: auto;
display: block;
/*fade*/
/* Theoretically for IE 8 & 9 (more valid) */
/* ...but not required as filter works too */
/* should come BEFORE filter */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* This works in IE 8 & 9 too */
/* ... but also 5, 6, 7 */
filter: alpha(opacity=50);
/* Older than Firefox 0.9 */
-moz-opacity:0.5;
/* Safari 1.x (pre WebKit!) */
-khtml-opacity: 0.5;
/* Modern!
/* Firefox 0.9+, Safari 2?, Chrome any?
/* Opera 9+, IE 9+ */
opacity: 0.5;
}
a.fade1
{
background: transparent url(http://jameskbrooks.com/wp- content/uploads/2012/11/MC2151023682-e1353394381773.gif) no-repeat top left;
}
a.fade2
{
background: transparent url(http://jameskbrooks.com/wp- content/uploads/2012/11/MC2151023684-e1353394564665.gif) no-repeat top left;
}
a.fade3
{
background: transparent url(http://jameskbrooks.com/wp- content/uploads/2012/11/MC2151023683-e1353394572666.gif) no-repeat top left;
}
a.fade:hover
{
/*fade*/
/* Theoretically for IE 8 & 9 (more valid) */
/* ...but not required as filter works too */
/* should come BEFORE filter */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
/* This works in IE 8 & 9 too */
/* ... but also 5, 6, 7 */
filter: alpha(opacity=100);
/* Older than Firefox 0.9 */
-moz-opacity:1.0;
/* Safari 1.x (pre WebKit!) */
-khtml-opacity: 1.0;
/* Modern!
/* Firefox 0.9+, Safari 2?, Chrome any?
/* Opera 9+, IE 9+ */
opacity: 1.0;
-webkit-transition: opacity 600ms linear;
-moz-transition: opacity 600ms linear;
-o-transition: opacity 600ms linear;
transition: opacity 600ms linear;
}
So based on those css3 declared above, by default the a.fade is set to opacity by half and then whenever a user hover or mouseover to those elements, the opacity is set to full with an animation on it like fade in from half opacity to full opacity but the problem is whenever I withdraw my mouse from those element, there is no animation like fade out from full opacity then back to its default opacity which is 50%. I know this could be done by jquery so Im looking someone around here to give me a clue on how to do it. css3 preferred.
Hope I could find something that can solve my issue, thank you.
Im open in any ideas, recommendation and suggestions.

Yes you can do it in jQuery:
$('#container')
.on('mouseover', 'a.fade', function(){
$(this).animate({'opacity': 1}, 500) // animate to 100%, in 500 ms
})
.on('mouseout', 'a.fade', function(){
$(this).animate({'opacity': 0.5}, 500) // animate to 50%, in 500 ms
})

jQuery provides fadeIn() ,fadeOut() and fadeIn() for you to change opacity of any object.
Just trigger fadeIn() ,fadeOut() or fadeIn() for $("a.fade").hover().
For example,
$("a.fade").hover(
function() { $(this).fadeTo("slow", 0.5); },
function() { $(this).fadeTo("slow", 1); }
);
For your reference, http://api.jquery.com/fadeTo/

Jquery slide out menu items

I have searched and searched for options as far a Jquery goes and I can not seem to find anything to mach what I want, yet it seems like such a simple effect. Can anyone tell me how I can have the menu items in the image below slide out like the second item when someone hovers over it?

$('.menuClass').mouseover(function(){
$(this).animate({'marginTop':'100px'});
});
$('.menuClass').mouseout(function(){
$(this).animate({'marginTop':'0px'});
});
Change the values of the marginTop accordingly.
These will also help:
http://api.jquery.com/mouseover/
http://api.jquery.com/mouseout/
http://api.jquery.com/animate/

You can use multiple css animate method for this.
Here is your question's jQuery answer.
jQuery:
$('div').bind({
mouseenter: function() {
$(this).stop().animate({'background-position-y':'-20px','height':'68px'},600);
},
mouseleave: function() {
$(this).stop().animate({'background-position-y':'-58px','height':'30px'},600);
}
});​
css:
div {
background: url(http://i.stack.imgur.com/g3aqx.jpg) -146px -58px;
float:left; width:86px; height:30px;
} ​
----------------------------------
Or
You can do this with just using CSS3:
CSS3 animate jsFiddle example here.
div {
float:left; background: url(http://i.stack.imgur.com/g3aqx.jpg) -146px -58px;
width:86px; height:30px;
transition: .5s;
-moz-transition: .5s; /* Firefox 4 */
-webkit-transition: .5s; /* Safari and Chrome */
-o-transition: .5s; /* Opera */
}
div:hover { background-position-y:-20px; height:68px; } ​

You can use the animate jquery method:
http://jsfiddle.net/wWhG2/42/
$("#img").hover(function() {
$(this).stop();
$(this).animate({top:"0"},500,null);
}, function () {
$(this).stop();
$(this).animate({top:"-150"},500,null);
});