w=Hi all, what I am trying to achieve is the animation of a progress bar namely .progress div from 0% width on document.ready to 100% width on document.load however I want this to be animated smoothly - I have a feeling this could be done via CSS but it is not cross browser and at the moment I the width of .progress div goes nearly directly to 100% width. Its containing div #overlay will also fade on document.ready... Any ideas?
Heres what I have at the moment;
CSS
.progress {
width: 100%;
height: 4px;
background: none;
position: absolute;
top: 0;
text-align: left;
}
.progress div {
background: #000;
}
JQuery
var progress = $('.progress div');
$(window).ready(function(){
progress.css('width','0'+'%');
});
$(window).load(function(){
//Set width to 100%
progress.css('width','100'+'%');
// PAGE IS FULLY LOADED
// FADE OUT YOUR OVERLAYING DIV
$('#overlay').fadeOut();
});
HTML
<div id="overlay">
<div class="progress">
<div class="bar"></div>
</div>
<div id="logo">
<img src="images/logo.png">
</div>
</div>
Thanks in advance for any help ;)
EDIT
I have tried using css transitions however the same scenario happens, their just goes straight to 100% instead of going over 4s as stated in the transition statement - this is show below
-webkit-transition: width 500ms ease-out 1s;
-moz-transition: width 500ms ease-out 1s;
-o-transition: width 500ms ease-out 1s;
transition: width 500ms ease-out 1s;
}
Use animate
jsfiddle Example
$(document).ready(function(){
var progress = $('.progress .bar');
//Set width to 100%
progress.animate({
width:'100%'
}, 2000);
setTimeout(function() {
$('#overlay').fadeOut();
}, 4000);
});
The reason it shoots right to 100% is because there is no intermediary between document-ready to window-loaded.
Your JS doesn't have an event to say "Im XYZ% done loading the objects". The browser does - but it's still doing a LOT of work to do that integration (getting the headers for all elements on the page, their file sizes, and the sum as it all comes in). But none of that is exposed to the javascript - that's internal browser engine code.
So you have just one step - from dom-ready to window-loaded - that's why it fires up. The other guy answering your question using a setTimeOut is just simulating a percentage loading - it's not a true representation of the actual percentage.
Unfortunately, you'll never get it. Unless you're doing a lot of REST calls, AJAX calls and loading your objects atomically -- you can sort of simulate it by "I'm loading 10 objects via REST/AJAX/OWIN [please don't] -- trigger a bump up each time one is done" sort of thing.
So I'm using jQuery to change icons, and using CSS to apply a transition. For some reason its not working Here's my code
CSS
.fa-heart{
transition: 1s;
}
.fa-heart-o{
transition: 1s;
}
JS
$('.fa-heart-o').hover(function() {
$(this).toggleClass('fa-heart-o fa-heart');
}, function() {
$(this).toggleClass('fa-heart-o fa-heart');
});
A demo http://jsfiddle.net/cLVBg/1/ Any ideas?
content is not an animatable property, thus transition does not apply. However if you just want to fill in the heart with a transition in opacity, try working with a SVG- or CSS-created heart, or just place one on top of another and change their opacity value.
Example: http://jsfiddle.net/cLVBg/5/
What you are doing now is replacing the content on hover. If you want a slow transition, you can use CSS properties to achieve that, like so:
JSFiddle Example
HTML:
<div id="transition"></div>
CSS:
#transition {
width: 50px;
height: 50px;
background-color: blue;
}
#transition:hover {
transition: background-color 1s ease;
background-color: red;
}
The transition property requires that you declare another property to apply the transition to. You can select a duration, a transition timing function (ease, in this case), and a delay if you want.
I have the following HTML:
<div id="welcome-content">
// Code
</div>
<div id="configure-content" style="display:none">
// Code
</div>
And (working) jquery that toggles between them:
$('.back-welcome').click(function(){
$('#welcome-content').toggle();
$('#configure-content').toggle();
});
I want to use CSS3 to create a fade effect as I toggle between them. I have tried the following:
#welcome-content, #configure-content{
-webkit-transition: all 400ms;
-o-transition: all 400ms;
-moz-transition: all 400ms;
-ms-transition: all 400ms;
-khtml-transition: all 400ms;
}
However, no animation takes place. What am I doing wrong?
The property display that assign the method toggle () can't be animated with the CSS transitions. Maybe you want to look at fadeIn() and fadeOut().
Edit
I've found this another method fadeToggle() i don't know much about it but you can search and use this:
$('.back-fade').click(function(){
$('#welcome-content').fadeToggle(2000);
$('#configure-content').fadeToggle(2000);
});
Check this demo http://jsfiddle.net/8urRp/14/ *
*I made the divs with absolute position to keep them on the same space
There can only be a transition for a CSS property from one value to another. For a fade transition, the opacity should go from 0 to one.
CSS
.foo {
opacity: 0;
transition: all 400ms;
}
.foo.active {
opacity: 1
}
JavaScript
$('.mybtn').click(function() { $('.foo').toggleClass('active'); })
See this fiddle
Now there is an annoying thing with showing an hiding elements using with CSS transitions. The transition from display: none to display: block is instant, canceling out all other transitions.
There are several ways around this. First you can just use the jQuery fadeOut function. If you do really insist in using CSS transitions have a look at this answer.
I'm attempting to use Bootstrap's Carousel to handle content that isn't the same height. The heights will differ based on the browsers width, and there is content below the carousel. I'd like to use CSS to animate the height change between slides. With some help from a friend I almost have this working in FireFox (the first slide jumps, the rest animate) but an obvious bug is happening with the sliding animation in Chrome.
Any input would be great, even if you think I should handle the height animation in a completely different way, please let me know!
Here is the JS and CSS that I think matter, but the whole thing is on JS Fiddle: http://jsfiddle.net/tkDCr/
JS
$('#myCarousel').carousel({
interval: false
});
$('#myCarousel').bind('slid', function(e) {
console.log('slid',e);
});
$('#myCarousel').bind('slide', function(e) {
console.log('slide',e);
var next_h = $(e.relatedTarget).outerHeight();
console.log(next_h);
$('.carousel').css('height', next_h);
});
By commenting out lines 12 and 13 of the JavaScript you can see that the bug is clearly being caused by assigning the variable next_h with the data from '$(e.relatedTarget).outerHeight();'. Even if the variable isn't used it still breaks the animation. Commenting out 11,12, and 13, will show you how the carousel functions normally.
CSS
.carousel {
width: 80%;
margin-left: auto;
margin-right: auto;
background: lightgoldenrodyellow;
-webkit-transition: height .5s ease;
-moz-transition: height .5s ease;
-ms-transition: height .5s ease;
-o-transition: height .5s ease;
transition: height .5s ease;
}
Thank you in advance.
// animate do the same - timeout is not needed
$('#myCarousel').carousel();
$('#myCarousel').bind('slide', function(e) {
$('#myCarousel').animate({height: $(e.relatedTarget).outerHeight()});
});
// After using animate, there is no need for transition in css (or height)
You can get around the problem by delaying the call to outerHeight() by a short timeout:
$('#myCarousel').bind('slide', function(e) {
setTimeout(function () {
var next_h = $(e.relatedTarget).outerHeight();
$('.carousel').css('height', next_h);
}, 10);
});
Also, you probably want to set the height of .carousel to something in the css, otherwise the first transition will begin at height 0, making it drop from the top.
I updated your fiddle here: http://jsfiddle.net/tkDCr/3/
I want to bypass CSS transition and change a property instantly.
I tried to set transition-duration to 0s before the change and then set transition-duration back to its original value:
$('div').css('width', '200px').delay(1000).queue(function() {
$(this).css({
transitionDuration: '0s',
msTransitionDuration: '0s',
mozTransitionDuration: '0s',
webkitTransitionDuration: '0s',
oTransitionDuration:'0s'
}).css('width', '10px').css({
transitionDuration: '2s',
msTransitionDuration: '2s',
mozTransitionDuration: '2s',
webkitTransitionDuration: '2s',
oTransitionDuration:'2s'
})
})
Fiddle
This obviously doesn't work.
I understand that the spec does not define that behavior for this:
Since this specification does not define when computed values change,
and thus what changes to computed values are considered simultaneous,
authors should be aware that changing any of the transition properties
a small amount of time after making a change that might transition can
result in behavior that varies between implementations, since the
changes might be considered simultaneous in some implementations but
not others.
Is there an easy way to do this?
Note: The property I am changing is transform so .animate() would not be an option.
Since nobody else is posting a valid answer, here goes:
$('div').css('width', '200px').delay(1000).queue(function() {
$(this).css({transition: '0s', width: '10px'}).delay(1).queue(function() {
$(this).css({transition:'2s'});
});
},1000);
FIDDLE
Or if it's the other way:
$('div').css({
transition: '0s'
}).css('width', '200px').delay(1000).queue(function() {
$(this).css({width: '10px', transition: '2s'});
});
FIDDLE
jQuery should normalize vendor prefixes these days, so you don't have to type them all yourself.
The issue here is that jQuery attaches all the styles at once, only keeping the last styles, overwriting the previous styles of the same CSS property without ever doing a repaint of the DOM, and testing with native javascript seems to be doing the same thing, so it's probably the browser trying to avoid uneccessary reflows by adding a style just to have it changed in the next line of code, so doing:
$('div').css({
transition: '0s',
width: 200
}).css({
transition: '3s',
width: 10
});
won't work as only the last style is added.
This is where delay() comes into play, the OP's question was already using delay() so there was no reason not to use it, but removing delay() will of course cause the above issue, where the browser doesn't paint the first style, but only the last etc.
As delay() is really just a fancy timeout, it effectively defers the execution of the second setting of the styles, causing two browser repaints.
As this is most likely a browser issue, and not something we can change, deferring the setting of the second style is the only way to make this work, and using a delay will still work even if it's set to just 1 milliseconds, or one could defer the execution with a regular timeout, which is the usual way to defer execution of a script:
$('div').css({
transition: '0s',
width: 200
});
setTimeout(function() {
$('div').css({
transition: '3s',
width: 10
});
});
FIDDLE
The above will work just fine, as the timeout causes the first setting of the style to be painted by the browser, and defers the setting of the style inside the timeout to a later time, but as no time is set, it's executed as soon as the browser can (but still deferred until after the current script has completed), which for the human eye would seem like immediately, and that solves the issue.
Set up an override class that would disable css transitions on an element applied to, !important is perfect for this:
.notransition {
-webkit-transition: none !important;
-moz-transition: none !important;
-o-transition: none !important;
-ms-transition: none !important;
transition: none !important;
}
You can now toggleClass to switch the desired behaviour (smooth transition vs instant change):
$('div').
toggleClass('notransition', true). //or false!
css('width', '200px');
Fiddled. IMO one of the advantages of this approach is that you have clear separation between default element styling and the disable all smooth animations flag. This is also a very "wrappable" reusable approach, i.e. you can easily add an optional boolean property to your existing methods that would indicate whether or not it should be executed with transitions.
NB: sometimes you may want to disable transitions on the page altogether for whatever performance/UX reasons. In that case, you can change the selector to .notransition * and disable transition on all descendant elements.
If you have control of the CSS
The easiest thing to do is tie the animation to some class, and then at what point you want the animation to no longer be bypassed, you add the class, otherwise no animation is ever set. If the reverse, you generally want the animation, but occasionally want to bypass it, then add the class by default and remove it at time of bypassing.
Example CSS
div{
height: 100px;
width: 200px;
background: red;
}
div.doTransition {
width: 10px;
transition: width 2s linear;
-ms-transition: width 2s linear;
-moz-transition: width 2s linear;
-webkit-transition: width 2s linear;
-o-transition: width 2s linear;
}
See fiddle which creates a click event to start animation when it is desired, but this could be some other programmatic trigger to add the class at the time that one no longer wants to bypass it. This fiddle does the opposite, it assumes the animation is present, but on page load immediately bypasses it by removing the class.
The issue is that, since there is no reason for the browser to slow down and execute each operation seperately, it combines them and does both at the same time. Querying offsetHeight is one way to force it to do each operation seperately, as it has to recalculate the height. http://jsfiddle.net/markasoftware/6cTeY/15/ works perfectly
This is the only way I could make it work. jQuery seems to be a bit stubborn.
http://fiddle.jshell.net/8qTpe/1/
P.S. There are some errors in your approach:
You are re-sizing to 200px before the delay, thus using the default CSS settings.
You are re-sizing to 10px before the change of the transition back to 2s.
Now jQuery seems to apply all CSS settings in a row so that's why the whole thing does not seem to work.
I'd go for a rather clean CSS solution
HTML
<div id="foo"></div>
<button class="out">out</button>
<button class="in">in</button>
JS
$('button.out').click(function(){console.log($('#foo').addClass);$('#foo').addClass('out')})
$('button.in').click(function(){$('#foo').removeClass('out')})
CSS
div{
height: 100px;
width: 10px;
background: red;
transition: width 0s linear;
-ms-transition: width 0s linear;
-moz-transition: width 0s linear;
-webkit-transition: width 0s linear;
-o-transition: width 0s linear;
}
div.out {
width: 200px;
transition: width 2s linear;
-ms-transition: width 2s linear;
-moz-transition: width 2s linear;
-webkit-transition: width 2s linear;
-o-transition: width 2s linear;
}
http://jsfiddle.net/6cTeY/19/
I usually do it in this vanilla JS fashion.
FIDDLE
HTML
Suppose you have an element
<div id="element"></div>
CSS
Suppose your element has CSS Transitions already active and background: green
#element {
background: green;
width: 200px;
height: 200px;
-webkit-transition: 'all 0.5s ease-out';
-moz-transition: 'all 0.5s ease-out';
-ms-transition: 'all 0.5s ease-out';
-o-transition: 'all 0.5s ease-out';
}
JS
The element has CSS transitions but we want to change the element's background to BLUE, instantly.
Right after that, we want the element's normal behaviour to return so we can animate it's background to RED.
We need to shut off transitions for a moment and restore them right after.
// grab the element
var element = document.getElementById('element');
// removeTransitions
element.style.webkitTransition = 'none';
element.style.mozTransition = 'none';
element.style.msTransition = 'none';
element.style.oTransition = 'none';
// apply desired 'instant' property
element.style.background = 'blue'; // is applied instantly
// this 10ms timeout is necessary for the transitions to be active again
setTimeout(function() {
element.style.webkitTransition = 'all 5s ease-out';
element.style.mozTransition = 'all 5s ease-out';
element.style.msTransition = 'all 5s ease-out';
element.style.oTransition = 'all 5s ease-out';
// apply desired 'animated' property
element.style.background = 'red'; // is applied smoothly
}, 10);
var ball = document.querySelector('.ball'),
ballSpeed = 2,
button = document.querySelector('button');
// Chane to random speed "instantly" (on button "click")
button.addEventListener('click', ()=>{
ballSpeed = Math.random()*8 + 1;
ball.style.transitionDuration = ballSpeed + 's';
ball.classList.remove('move');
ball.clientHeight; // <--- triggers repaint
ball.classList.add('move');
// set button text
button.textContent = ballSpeed.toFixed(2) + 's';
})
function animate( speed ){
ball.style.transitionDuration = '0s';
ball.classList.remove('move');
ball.clientHeight; // <--- triggers repaint. has to be after "move" class was removed
ball.style.transitionDuration = ballSpeed + 's';
ball.classList.add('move');
ball.removeEventListener('transitionend', animate)
ball.addEventListener('transitionend', animate); // keep rollin..
}
animate();
html, body{ height:100%; overflow:hidden; }
.ball{
position: absolute;
width: 3em;
height: 3em;
left:0; right:0; top:0; bottom:0;
margin: auto;
transition-duration: 2s; /* <-- start speed */
transition-timing-function: linear;
}
.ball::after{
content: '';
display: block;
width: 100%;
height: 100%;
transform: translateX(100%);
border-radius:50%;
background: gold;
}
.ball.move{
transform: rotate(360deg);
}
<button>2s</button>
<div class="ball"></div>
I don't know how this works in JQuery, but you could do this in CSS (at least at the time of writing):
div {
animation: trans 2s;
}
#keyframes trans {
0% {
width: 200px;
}
99.9% {
width: 200px;
}
100% {
width: 10px;
}
}
pure JS solution that should work with JQuery (have not tested).
The problem with the accepted answer is placing a value for the delay, but a better solution is to have a delay of 0. We are gonna use a little trick with the event loop to achieve this:
const button = document.querySelector('button');
function reposition() {
button.style.transition = 'none';
button.style.transform = 'translate(-50%)';
setTimeout(() => {
button.style.transition = '1s';
button.style.transform = 'translate(0)';
}, 0);
}
button.addEventListener('click', reposition);
<button>
Click Me
</button>
This is called a zero delay. It still uses a delay, but you don't have to feel icky about it because this will instantly run when the stack is clear.
If you want to understand why this is, I recommend watching this video
But here's a (messy) short explanation:
Basically what's happening is that setTimeout() will hold the value until a certain amount of time, our time here is 0, but it won't execute yet until the stack is clear, (why? this is, watch the video) because the browser still has to repaint the changes, the re-render will still be in the stack and as it finishes, the function passed to setTimeout() will be executed causing another re-render.
Do I know if this works 100% of the time? In theory, it should, but I'm no expert.