We Keep Coding

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.

Stupid issue with animate function of jQuery [duplicate]

This question already has answers here:
jQuery animate backgroundColor
(18 answers)
Closed 9 years ago.
Sorry for bad english.
The animate function of jQuery work fine at line 2. But at line 3 doesn't work... why?
$('.opac').hover(function(){
$('img', this).animate({opacity: '0.6'}, 500);
$('p', this).animate({background: 'orange'}, 500);
});
The HTML is this:
<div class="opac">
<img src="image.png" />
<p class="fot">text here...</p>
</div>
Thanks!
ps: the developer tool doesn't give any error...

jQuery doesn't support animating colors natively. Here's a quick plugin to include in your codebase:
From http://www.bitstorm.org/jquery/color-animation/
(function(a){function b(){var b=a("script:first"),c=b.css("color"),d=!1;if(/^rgba/.test(c))d=!0;else try{d=c!=b.css("color","rgba(0, 0, 0, 0.5)").css("color"),b.css("color",c)}catch(e){}return d}function c(b,c,d){var e="rgb"+(a.support.rgba?"a":"")+"("+parseInt(b[0]+d*(c[0]-b[0]),10)+","+parseInt(b[1]+d*(c[1]-b[1]),10)+","+parseInt(b[2]+d*(c[2]-b[2]),10);return a.support.rgba&&(e+=","+(b&&c?parseFloat(b[3]+d*(c[3]-b[3])):1)),e+=")"}function d(a){var b,c;return(b=/#([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})/.exec(a))?c=[parseInt(b[1],16),parseInt(b[2],16),parseInt(b[3],16),1]:(b=/#([0-9a-fA-F])([0-9a-fA-F])([0-9a-fA-F])/.exec(a))?c=[17*parseInt(b[1],16),17*parseInt(b[2],16),17*parseInt(b[3],16),1]:(b=/rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(a))?c=[parseInt(b[1]),parseInt(b[2]),parseInt(b[3]),1]:(b=/rgba\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9\.]*)\s*\)/.exec(a))&&(c=[parseInt(b[1],10),parseInt(b[2],10),parseInt(b[3],10),parseFloat(b[4])]),c}a.extend(!0,a,{support:{rgba:b()}});var e=["color","backgroundColor","borderBottomColor","borderLeftColor","borderRightColor","borderTopColor","outlineColor"];a.each(e,function(b,e){a.Tween.propHooks[e]={get:function(b){return a(b.elem).css(e)},set:function(b){var f=b.elem.style,g=d(a(b.elem).css(e)),h=d(b.end);b.run=function(a){f[e]=c(g,h,a)}}}}),a.Tween.propHooks.borderColor={set:function(b){var f=b.elem.style,g=[],h=e.slice(2,6);a.each(h,function(c,e){g[e]=d(a(b.elem).css(e))});var i=d(b.end);b.run=function(b){a.each(h,function(a,d){f[d]=c(g[d],i,b)})}}}})(jQuery);
You also need to set an initial color value to animate from (if you haven't already), and as far as I know (could be wrong) you should be using hex or rbg values for your colors to animate properly and not explicit color names.

In case you aren't opposed to CSS3: http://jsfiddle.net/MkgDC/1/
img {
opacity: 1;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
p {
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
.opac:hover > img {
opacity: .6;
}
.opac:hover > p {
background: orange;
}

Or you can use jQueryUI
$('div.opac').hover(function(){
jQuery('img', this).animate({opacity: '0.6'}, 500);
jQuery('p', this).animate({backgroundColor: "#aa0000"}, 500 );
});
Fiddle

Background color cannot be animated. see this link
http://api.jquery.com/animate/

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

Fade out / fade in effect with CSS3

I'm trying to create a fade out / fade in effect with CSS3 animations. Here is my CSS :
#buttonright, #buttonleft{
-webkit-transition:opacity 0.5s linear;
-moz-transition:opacity 0.5s linear;
-o-transition:opacity 0.5s linear;
-ms-transition:opacity 0.5s linear;
transition:opacity 0.5s linear;
}
And the Javascript (i'm using jquery) :
$('#buttonleft').css("opacity","0");
$('#buttonright').css("opacity","0");
$('#buttonleft').css("opacity","1");
$('#buttonright').css("opacity","1");
It looks like the browser think it's stupid to set the opacity to 0 then to set it back to 1. Does someone has a possible solution ?
Thank you.

Edit: Regard yaki's answer for a pure CSS3 solution.
You're not giving the browser enough time to complete the transition. If you add a setTimeout to the latter statements, it should work.
Something like this:
$('#buttonleft').css("opacity","0");
$('#buttonright').css("opacity","0");
setTimeout(function(){$('#buttonleft').css("opacity","1");}, 5000);
setTimeout(function(){$('#buttonright').css("opacity","1");}, 5000);

Actually accepted solution is not CSS3 solution (it's still requires some javascript code). Please check the code below.
html:
<a id='buttonleft'>Button left</a>
<a id='buttonright'>Button right</a>
css:
#buttonleft, #buttonright {
text-align: left;
background: rgb(180,180,255);
opacity:0.5;
/* property duration timing-function delay */
-webkit-transition: opacity 500ms linear 100ms;
-moz-transition: opacity 500ms linear 100ms;
-o-transition: opacity 500ms linear 100ms;
transition: opacity 500ms linear 100ms;
}
#buttonleft:hover, #buttonright:hover {
opacity: 1.0;
}

something like this?
$('#button').hover(
function() {
$(this).animate({opacity: 0}, 500);
},
function() {
$(this).animate({opacity: 1}, 500);
}
);

You can use CSS3 animations now that it is more supported than when you asked the original question. I've created a jsFiddle showing how to do this on hover.
#keyframes demo {
from {
animation-timing-function: ease;
opacity: 1;
}
50% {
animation-timing-function: ease-in;
opacity: 0;
}
to {
animation-timing-function: ease-inout;
opacity: 1;
}
}
img:hover
{
animation-delay: 0s;
animation-duration: 2s;
animation-iteration-count: 1;
animation-name: demo;
}