We Keep Coding

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

Image/div flicker on hover in google chrome

I'm animating the images so that when hovered over the opacity goes up to 1, that part is working perfectly fine however when images are hovered over in chrome the 2nd column flickers a tiny bit to the side. I've tested it in IE and Firefox aswell and have no issues.
Check it for yourself here: http://abmenzel.com/work/
HTML:
<body class="blue4">
<div class="content">
<div class="work-item blue4">
<img src="img/Template-2-Intro.png"/>
</div>
</div>
</body>
CSS:
.work-item{
width:25%;
opacity:0.8;
overflow:hidden;
display:block;
float:left;
}
img{
width:100%
}
.work-item:hover{
opacity:1;
-webkit-transition: all 0.2s ease-in-out 0s;
-moz-transition: all 0.2s ease-in-out 0s;
-o-transition: all 0.2s ease-in-out 0s;
-ms-transition: all 0.2s ease-in-out 0s;
transition: all 0.2s ease-in-out 0s;
}
I'm also using a script to set the height equal to the dynamic width, which might have something to do with it but I am unsure..
SCRIPT:
$(function() {
var div = $('.work-item');
var width = div.width();
div.css('height', width-5);
});

First of all, put your transition properties in normal element, not on :hover state.
Then, if you need only transition on opacity, use :
opacity 0.2s ease-in-out 0s
That flicker is a known bug in Webkit browsers, it happens when you animate opacity on fluid elements (here 25%).
Here's a workaround:
-webkit-backface-visibility: hidden;
-webkit-transform: translateX(0);
I know it sounds like a hack, but it works...

I use translate3D instead of translateX:
img {-webkit-transform: translate3D(0,0,0);}

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