I have bar charts in my application that work fine but i'd like them to transition left to right on load across the screen. So I have tried the following:
CSS:
.progress-meter-interest{
background-color: #FFD733;
width: 250px;
}
.progress-meter-interest.horizTranslate {
animation-direction:normal;
-webkit-transition: 3s;
-moz-transition: 3s;
-ms-transition: 3s;
-o-transition: 3s;
transition: 3s;
}
In view:
<div class="progress-meter-interest horizTranslate" style ="width: <%= homework.average_interest * 100 / 5 %>%"><%= homework.average_interest %></div>
JS:
<script>
$(document).ready(function() {
$( ".progress-meter-interest" ).each(function() {
var length = $( this ).data("bar-length");
$( this ).css('width', length);
});
});
</script>
Clearly I am not defining data-bar-length as a set value in the div as the graphs are dynamic. When I do define it the transition effect works.
How do I get it to work with the dynamic data?
Thanks. Appreciate any help.
The transition shorthand property needs to know which property to transition. At the very least you will need to change transition: 3s to transition: width 3s so your CSS should look like:
.progress-meter-interest{
background-color: #FFD733;
width: 250px;
}
.progress-meter-interest.horizTranslate {
animation-direction:normal;
-webkit-transition: width 3s;
-moz-transition: width 3s;
-ms-transition: width 3s;
-o-transition: width 3s;
transition: width 3s;
}
See https://developer.mozilla.org/en-US/docs/Web/CSS/transition for more details on the transition property.
Related
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
I have an img tag that I want to change the src when hover and it all works but i would like to add some transition so it doesn't look so rough but since it's an img src i cant target it with css.
http://jsfiddle.net/Ne5zw/1/
html
<img id="bg" src="img/img1.jpg">
<div onmouseover="imgChange('img/img2.jpg'); "onmouseout="imgChange('img/img1.jpg');">
js
function imgChange(im){
document.getElementById('bg').src=(im);
}
You want a crossfade. Basically you need to position both images on top of each other, and set one's opacity to 0 so that it will be hidden:
<div id="container">
<img class="hidden image1" src="http://www.istockphoto.com/file_thumbview_approve/4629609/2/istockphoto_4629609-green-field.jpg">
<img class="image2" src="http://www.istockphoto.com/file_thumbview_approve/9958532/2/istockphoto_9958532-sun-and-clouds.jpg" />
</div>
CSS:
.hidden{
opacity:0;
}
img{
position:absolute;
opacity:1;
transition:opacity 0.5s linear;
}
With a transition set for opacity on the images, all we need to do is trigger it with this script:
$(function(){
debugger;
$(document).on('mouseenter', '#hoverMe', function(){
$('img').toggleClass('hidden');
});
});
http://jsfiddle.net/Ne5zw/12/
Here is a pure css solution using css transition. You can use a div as the container and set the background-image on hover.
.image-container {
background: url(http://placeholder.pics/svg/300x300/DEDEDE/555555/Old%20Image) center center no-repeat;
background-size: contain;
width: 150px;
height: 150px;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.image-container:hover {
background-image: url("http://placeholder.pics/svg/300x300/DEDEDE/555555/New%20Image");
}
<div class="image-container"></div>
Just in case someone is curious how to actually create a transition-like effect when you are actually changing the source attribute of an image, this was the solution I came up with.
Javascript:
var bool = false;
setInterval(() => {
bool = !bool;
let imgSrc = bool ? 'hero-bg2.jpg' : 'hero-bg.jpg'; // Toggle image
$('.parallax-slider').addClass('transitioning-src'); // Add class to begin transition
setTimeout(() => {
$('.parallax-slider').attr('src', `https://website.com/images/${imgSrc}`).removeClass('transitioning-src');
}, 400); // Ensure timeout matches transition time, remove transition class
}, 6000);
CSS:
.parallax-slider {
transition: opacity 0.4s ease-in;
-webkit-transition: opacity 0.4s ease-in;
-moz-transition: opacity 0.4s ease-in;
-ms-transition: opacity 0.4s ease-in;
-o-transition: opacity 0.4s ease-in;
opacity: 1;
}
.transitioning-src {
transition: opacity 0.4s ease-out;
-webkit-transition: opacity 0.4s ease-out;
-moz-transition: opacity 0.4s ease-out;
-ms-transition: opacity 0.4s ease-out;
-o-transition: opacity 0.4s ease-out;
opacity: 0;
}
This will give the illusion of 'fading to black and back' between images - even if you're using something like parallax.js where you have a data-attribute driven component that renders out into a dynamic image. Hope it helps someone.
Fixed Mister Epic solution's images in this jsfiddle.
HTML
<div id="container">
<img class="hidden image1" src="http://placeholder.pics/svg/300x300/DEDEDE/555555/Old%20Image">
<img class="image2" src="http://placeholder.pics/svg/300x300/DEDEDE/555555/New%20Image" />
</div>
<div id="hoverMe">hover me</div>
CSS
div#hoverMe {
background-color:yellow;
width:50px;
height:50px;
position:fixed;
top:300px;
}
div#container{
position:relative;
height:200px;
}
.hidden{
opacity:0;
}
img{
position:absolute;
opacity:1;
transition:opacity 0.5s linear;
}
JS
$(function(){
$(document).on('mouseenter', '#hoverMe', function(){
$('img').toggleClass('hidden');
});
});
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);}
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 });
});
});
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;
}