We Keep Coding

Trying to fade in a background color of my navigation bar after I scroll

If I scroll down on my website my navigation bar will go from "background-color: transparent" to black, and if I scroll up again it turns transparent again.
var positionSmall = 0;
$(document).scroll(function () {
positionSmall = $(this).scrollTop();
if (positionSmall > 140) {
$(".navbar").css('background-color', '#222222');
} else {
$(".navbar").css('background-color', '');
}
});
This works, but I now want the background color to fade in when scrolled down, and fade out when scrolled up again.
I've tried the .fadein and .animate functions from jquery, but they didn't seem to work for me. Does anyone have any ideas on how to do this?

No need for jQuery, you can do this with CSS. Just add a transition to your .navbar class, it will animate the transition even if the change is made in jQuery.
Code:
.navbar {
-webkit-transition: background-color 0.5s ease-in-out;
-moz-transition: background-color 0.5s ease-in-out;
-ms-transition: background-color 0.5s ease-in-out;
-o-transition: background-color 0.5s ease-in-out;
transition: background-color 0.5s ease-in-out;
}
Now you just have to modify the time and you should be good to go. Here is it in action.

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.

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.

jQuery on hover opacity

I have tried and failed to get this working. Basically I am trying to get it so that when you hover over one div, it should change the sibling's opacity to 0.5 that has class="receiver".
If you see this jsFiddle, there are 2 divs with class="outerwrapper", and both contain 2 divs of classes hover and receiver. When you hover over the div with class hover, the receiver's opacity should be set to 0.5, but only the one inside the same div (outerwrapper).
Any help would be much appreciated. Thanks in advance.

You don't need to use jQuery, or JavaScript, for this (though you can1), CSS is quite capable in most browsers of achieving the same end-result:
.hover:hover + .receiver {
opacity: 0.5;
}
JS Fiddle demo.
And also, even with 'only' CSS, in modern/compliant browsers, it's possible to use fade transitions (or, strictly speaking, to transition the opacity):
.receiver {
width: 50px;
height: 50px;
background-color: blue;
opacity: 1;
-webkit-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
-ms-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
transition: opacity 1s linear;
}
.hover:hover + .receiver {
opacity: 0.5;
-webkit-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
-ms-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
transition: opacity 1s linear;
}
​
JS Fiddle demo.
I was going to provide a JavaScript/jQuery solution as well, but there are several others already posted, now, and I'd rather not repeat other people's answers in my own (it just feels like plagiarism/copying).

Something like this would do it: http://jsfiddle.net/UzxPJ/3/
$(function(){
$(".hover").hover(
function(){
$(this).siblings(".receiver").css("opacity", 0.5);
},
function(){
$(this).siblings(".receiver").css("opacity", 1);
}
);
});​
References
.siblings() - Get the siblings of an element - http://api.jquery.com/siblings/
.hover() - Catch the mouseover/mouseout events - http://api.jquery.com/hover/

$('.hover').hover(function() {
$(this).next('.receiver').css('opacity', 0.5);
}, function() {
$(this).next('.receiver').css('opacity', 1.0);
});
http://jsfiddle.net/2K8B2/
(use .siblings or .nextAll if the .receiver is not necessarily the next element)

This works:
​$(document).ready(function() {
$('.hover').hover(function() {
var $parent = $(this).parent('.outerwrapper');
$parent.find('.receiver').css({ opacity : 0.5 });
}, function() {
var $parent = $(this).parent('.outerwrapper');
$parent.find('.receiver').css({ opacity : 1 });
});
});​

expand div height onmouseover

I need height on the div 50px in default and it has to be changed to 300px onmouseover. I coded in below manner to implement it.
<style type="text/css">
#div1{
height:50px;
overflow:hidden;
}
#div1:hover{
height:300px;
}
</style>
<body>
<div id="div1"></div>
</body>
This code is working fine but as per CSS property on hover its immediately changing its height. Now, I need a stylish way like slowly expanding div onmouseover and contracting onmoveout. How to expand and contract div on hover?

There are a few approaches -- here is CSS and Jquery, which should work in all browsers, not just modern ones:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#div1").hover(
//on mouseover
function() {
$(this).animate({
height: '+=250' //adds 250px
}, 'slow' //sets animation speed to slow
);
},
//on mouseout
function() {
$(this).animate({
height: '-=250px' //substracts 250px
}, 'slow'
);
}
);
});
</script>
<style type="text/css">
#div1{
height:50px;
overflow:hidden;
background: red; /* just for demo */
}
</style>
<body>
<div id="div1">This is div 1</div>
</body>

#div1{
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
Easy!

In a "modern" browser, you can just apply a css transition effect:
#div1 {
-moz-transition: 4s all ease-in-out;
-ms-transition: 4s all ease-in-out;
-webkit-transition: 4s all ease-in-out;
-o-transition: 4s all ease-in-out;
}
This would apply a transition effect over 4 seconds with a ease-in-out easing for compatible firefox, ie, chrome/safari (webkit) and opera browser. Read more:
CSS Transitions
You can take this one step ahead and check if the current browser supports css transitions, if available, use them for animation and if not use a javascript animation script. Example for that:
BarFoos animations

You can use jQuery's .animate() This will act on any element with with a class of "tab", and will revert on mouse-out.
$('.tab').hover(function() {
$(this).stop()
$(this).animate({
height: '+=250'
}, 500)
}, function() {
$(this).stop()
$(this).animate({
height: '-=250'
}, 500)
})

You can use jquery's .mouseover http://api.jquery.com/mouseover/, .mouseout http://api.jquery.com/mouseout/, and .animate http://api.jquery.com/animate/ to perform that.
On the .mouseover event, you would animate the height to be 300px, and on the .mouseout event you would animate to 50px. Make sure you call .stop on the div before you call animate, otherwise you will have odd issues.