Change table contents on hover? - javascript

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.

Related

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.

Why is it that when using JQuery, when I hover, there's no smooth animation?

I have the following in my script.js file:
$(document).ready(function(){
$( '.elementoBarra1').hover(
function(){
$(this).addClass('lineaBarraActive');
},
function(){
$(this).removeClass('lineaBarraActive');
}
);
});
There is a change in color (based on the instructions I'm giving in the stylesheet), but there's no animation (or transition). It just passes binarily to the other color, there's no animation where it passes through all the colors in the middle in a short-lapse of time.
Why is this?
EDIT: Just tried fadeIn() and fadeOut() and they are working properly, they have a smooth animation. Why are addClass() and removeClass() not working properly?

addClass and removeClass api of Jquery doesn't provide any animation. They are just meant for adding or removing class.
If you want to achieve animation, then you must add transition in the class you are adding.
There's no need for jQuery also. Just use :hover pseudo selector to achieve it
.elementoBarra1 {
background-color: black;
width: 100px;
height: 200px;
-webkit-transition: background-color 1s linear;
-moz-transition: background-color 100ms linear;
-o-transition: background-color 1s linear;
-ms-transition: background-color 1s linear;
transition: background-color 1000ms linear;
}
.elementoBarra1:hover {
background-color: red;
-webkit-transition: background-color 1s linear;
-moz-transition: background-color 100ms linear;
-o-transition: background-color 1s linear;
-ms-transition: background-color 1s linear;
transition: background-color 1000ms linear;
}
DEMO

You can try j Query Animate.
$( "selector" ).animate({
width: "70%",
opacity: 0.4,
marginLeft: "0.6in",
fontSize: "3em",
borderWidth: "10px"
}, 1500 );
You can set css style as mentioned above so that you can get smooth animation.
eg program: Fiddle Url

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

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

Categories