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.

jQuery Rotate with slideToggle

I have a div that when you click on it opens up the the content within, at the top of the bar I have an arrow image that if the content is closed (default position) the arrow is pointing to the right and when the content is open I want the arrow image to rotate to pointing down.
I am using jQueryRotate to rotate the image and I have all the elements working, but what I can't get it to work when toggling, I can only get the image to rotate once when opening the content, I have where I have got to here
$("#ProductHeaderWrap1").click(function () {
$("#ProductDetailsToggle1").stop().slideToggle("slow");
});
$("#ProductHeaderWrap1").click(function () {
$("#ProductHeaderWrap1").find(".arrow").rotate({
animateTo: 90
}, {
duration: 500
});
});
http://jsfiddle.net/cgF4a/ along with some worked on jQuery attempts, I just need the image to rotate to 0 when clicked to close the div.
Thanks for any help,
J.

It's easier to do this with CSS, take a look:
img.open {
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
transform:rotate(90deg);
-webkit-transition: -webkit-transform 1s linear;
-moz-transition: -moz-transform 1s linear;
-o-transition: -o-transform 1s linear;
transition: transform 1s linear;
}
img {
-webkit-transition: -webkit-transform 1s linear;
-moz-transition: -moz-transform 1s linear;
-o-transition: -o-transform 1s linear;
transition: transform 1s linear;
}
$(document).ready(function () {
$("#ProductHeaderWrap1").click(function () {
$("#ProductDetailsToggle1").stop().slideToggle("slow");
$(this).find("#Image1").toggleClass("open");
});
});
Updated JSFiddle

Smoothen jQuery animation

On my website built with Rails 4, I use jQuery's animate function. However, it doesn't seem to run very smoothly. In my application.js, my code is under $(window).load:
Here is a sample of the animate block:
$('.background').animate({right: '-2000px'}, 1000, function(){
$($('nav a.active').attr('href')).css("display","none");
$('nav a.active').removeClass('active');
$('.photos').css("display","none");
$(e.currentTarget).addClass('active');
hash = $('nav a.active').prop("hash");
target = document.getElementById(hash.slice(1));
$('.background').animate({right: '0px'}, 1000, function(){
$(target).fadeIn(300);
navFix();
});
});
What can I do to make this smoother? You can view the issue live here by clicking on the navigation links on the left.

The problem is that your CSS is fighting your JS (with jQuery). Specifically your transitions are fighting your animation.
In your CSS, you've added a CSS3 transition to the .background class:
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
So any time you change any of your .background's CSS properties that can be transitioned, it's gonna try to use that transition speed. Unfortunately for you, the CSS property right is a property that can be transitioned. So when you animate your background with a duration of 1000ms, it's fighting your CSS that wants to do it with a duration of 300ms.
So either use the transition or the jQuery animation, but not both simultaneously.
Fix 1. Should fix your problem and give you a duration of 300ms:
$('.background').css({right: '-2000px'}, function(){
$($('nav a.active').attr('href')).css("display","none");
$('nav a.active').removeClass('active');
$('.photos').css("display","none");
$(e.currentTarget).addClass('active');
hash = $('nav a.active').prop("hash");
target = document.getElementById(hash.slice(1));
$('.background').animate({right: '0px'}, 1000, function(){
$(target).fadeIn(300);
navFix();
});
});
Fix 2. Should fix your problem and give you a duration of 1000ms:
/* in your CSS */
.background {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
/* overriding the transition property that was applied to all*/
-webkit-transition: right 1s ease;
-moz-transition: right 1s ease;
-o-transition: right 1s ease;
-ms-transition: right 1s ease;
transition: right 1s ease;
}
// in your JS
$('.background').css({right: '-2000px'}, function(){
$($('nav a.active').attr('href')).css("display","none");
$('nav a.active').removeClass('active');
$('.photos').css("display","none");
$(e.currentTarget).addClass('active');
hash = $('nav a.active').prop("hash");
target = document.getElementById(hash.slice(1));
$('.background').animate({right: '0px'}, 1000, function(){
$(target).fadeIn(300);
navFix();
});
});

Change table contents on hover?

I have a table like this:
<div class="footer_row_3">
<table class="tableA">
<tr>
<td><img class="popcorn" src="http://i.imgur.com/HUjq2Va.png"></td>
<td><span class="statement">Lorem Ipsum</span></td>
<td><img class="popcorn" src="http://i.imgur.com/HUjq2Va.png"></td>
</tr>
</table>
</div>
What I want to do is that when the mouse hovers over tableA at any location within tableA, the following two changes happen:
Popcorn images change to this image: http://i.imgur.com/K29T3Fw.png
The text color changes to red.
It should have with a CSS 'fade' style transition, so that the contents fades into the updated style contents.
BOTH changes mentioned above should happen when I hover tableA from any place within tableA.
I know how to individually change text and image on hover, but I don't know how to do it together for multiple items.
How can I achieve this effect ?

Hover and change of other elements data/ styles is possible if the one element is the child of other
Here's a possible direction you can proceed and it works
#parent_element:hover > child_element {
//change your required styling or images
}
Heres the link
Hover to change

Try this:
CSS
span{
transition: color 2s ease;
}
.tableA:hover span{
color:red;
}
Plain Javascript (option 1)
document.getElementsByClassName('tableA')[0].onmouseover = function () {
var images = document.getElementsByClassName('popcorn');
console.log(images);
for (i = 0; i < images.length; i++) {
images[i].src = 'http://i.imgur.com/K29T3Fw.png'
}
};
Demo here
jQuery (option 2)
$('.tableA').hover(function () {
$('.popcorn').prop('src', 'http://i.imgur.com/K29T3Fw.png');
});
Demo here
EDIT:
New demo here

try this
table.tableA:hover span.statement {
color: red;
-webkit-transition: color 1s ease-in-out;
-moz-transition: color 1s ease-in-out;
-o-transition: color 1s ease-in-out;
-ms-transition: color 1s ease-in-out;
transition: color 1s ease-in-out;
}
table.tableA:hover img.popcorn {
opacity:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
table.tableA td:first-child, table.tableA td:last-child {
background: url('http://i.imgur.com/K29T3Fw.png');
}
for better control and getting rid of first-child and last-child add classes to the tds.

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