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.
I want to change my images with javascript and add an fade effect.
This is my css for the fade effect:
var image=document.getElementById("image");
var currentPos = 0;
var images = ["foto1.jpg","foto2.jpg","foto3.jpg"]
function volgendefoto() {
if (++currentPos >= images.length) currentPos = 0;
image.src = images[currentPos];
}
setInterval(volgendefoto, 4100);
#map {
height:1000px;
width:1000px;
background:black;
}
#overlay {
z-index:2;
background:white;
height:1000px;
width:1000px;
opacity:0;
-webkit-transition: opacity 0.1s;
-ms-transition: opacity 0.1s;
-moz-transition: opacity 0.1s;
-o-transition: opacity 0.1s;
transition: opacity 1s;
margin-top:-1000px;
transition-delay: 0.1s;
-webkit-transition-delay: 0.1s;
}
#overlay:hover {
opacity:.8;
transition-delay: 0s;
-webkit-transition-delay: 0s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='map'>
<img id="image" src="foto1.jpg">
<div id='overlay'></div>
</div>
It is for a school project where we are making a responsive website, so I am going to add this to that site.
Tried your piece of code which gives fade-out effect for the image on hover.
[You can see the output below][1]
[1]: https://jsfiddle.net/cxLjLnu8/1/ "Output here"
Is this what you did and expected?
Which effect you are in need of fade-in
or fade-out?
and
do you need the effect on Hover or on sliding the images?
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');
});
});
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/
I'm using the following code.
By clicking on div id="popUpPane", the div and it's childs should appear and slowly fade in.
By clicking on the div again, it should slowly fade out and then disappear.
Firefox and Chrome (which is webkit too) behave that way and I know Safari did in an earlier version, too. But right know on Safari and on Safari Mobile nothing happens at all when I click on "popUpPane".
Is this a bug in Safari or is there something I could change to come back to the intended behaviour?
One addition: If I set -webkit-transition to -webkit-transition: opacity .5s ease-in-out; it works fine but the transition only appears on the first click. There's no transitions after that first one... If I delete the opacity-part in the java-script the opo-up works but there's no transition.
All other transitions on my site are working. But they all use only opacity and no visibility.
Here's my code:
CSS:
#popUpPane {
white-space:normal;
position:fixed;
width:100%;
height:100%;
top:0;
left:0;
text-align:center;
vertical-align:middle;
visibility:hidden;
z-index:90;
}
#greyOut {
position:fixed;
width:100%;
height:100%;
top:0;
left:0;
background-color:#000;
opacity:0;
}
#popUpPicCanvas {
position:relative;
top:50%;
margin-top:-325px;
display:inline;
opacity:0;
z-index:100;
}
.fade {
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
HTML:
<div id="popUpPane" onClick="noPopUp()">
<div id="greyOut" class="fade"> </div>
<canvas id="popUpPicCanvas" width="1000" height="650" title="Bastian Beuttel" class="fade"></canvas>
</div>
Javascript:
var popUpPane = document.getElementById("popUpPane"),
greyOut = document.getElementById("greyOut"),
popUpPicCanvas = document.getElementById("popUpPicCanvas"),
popCanvasContext = popUpPicCanvas.getContext("2d");
var doPopUp = function(source,x,y){
var popUpPic = document.getElementById("pic"+source);
popCanvasContext.canvas.width = x;
popCanvasContext.canvas.height = y;
popCanvasContext.drawImage(popUpPic, 0, 0,x,y);
popUpPane.style.visibility = "visible";
greyOut.style.opacity = "0.7";
popUpPicCanvas.style.opacity = "1";
};
var noPopUp = function(){
greyOut.style.opacity = "0";
popUpPicCanvas.style.opacity = "0";
popUpPane.style.visibility = "hidden";
};
I hope someone can help me.
Thanks for your responds!
Yep, there is a bug in mobile Safari with simultaneous transition for opacity+visibility.
You can fix it using something except for visibility: in your case setting the width and height to 0 would help. However you must add the delay, so they would change not instantly.
Here is a dabblet with the working example: http://dabblet.com/gist/1642110
/**
* Delayed alternative for visibility
*/
a {
display: inline-block;
background: #888;
color:#FFF;
padding: 1em;
}
div {
width: 100px;
height: 100px;
background: lime;
transition: opacity 1s;
}
a:hover+div {
width: 0;
height: 0;
opacity: 0;
transition: width 0s 1s, height 0s 1s, opacity 1s;
}
Thank you!
Since this bug is now removed from the latest releases of webkit the problem is gone for safari and chrome.
i started to have problems since the position of my div also was transitioned so I wrote it like this:
.dofade {
-webkit-transition: visibility .5s ease-in-out, opacity .5s ease-in-out;
-moz-transition: visibility .5s ease-in-out, opacity .5s ease-in-out;
-o-transition: visibility .5s ease-in-out, opacity .5s ease-in-out;
transition: visibility .5s ease-in-out, opacity .5s ease-in-out;
}