I am trying to implement a sliding progrees bar. I want the progress to gradually increase.
I try:
HTML
<div id="progressKeeper">
<div id="progress"></div>
</div>
CSS
#progressKeeper {
width: 800px;
height: 25px;
border: 3px double #003366;
margin: 0px 10px;
padding: 3px;
}
JavaScript
var el = $('#progress');
var steppedIncreaseAmount = ($('#progressKeeper').width()) / 100;
for (var i = 0; i < 100; i++) {
el.width(el.width() + steppedIncreaseAmount+ 'px');
}
See this jsfiddle
But it just increases suddenly. I want a smooth effect, like a fade.
You need to set some kind of delay between the update of these values. However, because it appears that you're using jQuery, you can easily do something like this:
$(document).ready(function() {
var el = $('#progress');
el.animate({
width: "100%"
}, 1800);
});
http://jsfiddle.net/VbVBP/2/
Another way, if you really want to keep the setup you've got going now, would be do just add a setTimeout counter to your for loop like this:
var el = $('#progress');
var steppedIncreaseAmount = ($('#progressKeeper').width()) / 100;
for (var i = 0; i < 100; i++) {
setTimeout(function(){
el.width(el.width() + steppedIncreaseAmount+ 'px');
}, 1+i*20);
}
http://jsfiddle.net/VbVBP/3/
A simple for-loop is updating the values way faster than your eye can catch up....
You can use a timer function like setInterval for basic JS animation. This would work like:
var increase = setInterval(function(){
el.width(el.width() + steppedIncreaseAmount+ 'px');
}, 50); //50 is the interval in ms, i.e the function inside the interval gets called 20 times per second
When you are done with the animation (progress is at 100%) you should cancel the interval:
clearInterval(increase);
See a working fiddle and MDN docs on setInterval
If you want to dig deeper into the realms of JavaScript animation you might also want to learn about requestAnimationFrame
Try using animation:
el.animate({ width: "+=" + steppedIncreaseAmount }, 500);
Oh, don't use javascript for this. You can do it with only CSS3 animations.
#-webkit-keyframes progress {
from { }
to { width: 100% }
}
And in progress bar:
-webkit-animation: progress 2s 1 forwards;
-moz-animation: progress 2s 1 forwards;
-ms-animation: progress 2s 1 forwards;
animation: progress 2s 1 forwards;
Working example: http://jsfiddle.net/VbVBP/4/
I set up a demo of what I could figure out. http://jsfiddle.net/VbVBP/5/
I set the time of update to 300ms and the speed of that update animation to 300 also so it is constantly animating.
Instead of using the random value you would use whatever percentage complete your operation is.
<div id="progressKeeper">
<div id="progress"></div>
</div>
var randomPercentInt = 0;
function percentComplete(percent) {
var el = $('#progress');
el.animate({
width: percent
}, 300);
}
$(document).ready(function() {
percentComplete('0%');
});
function randomPercent() {
var randomNumber = Math.floor(Math.random() * 10);
randomPercentInt += randomNumber;
console.log(randomPercentInt);
if(randomPercentInt>100)
{
randomPercentInt = 100;
clearInterval(clearme);
}
percentString = randomPercentInt.toString() + '%';
percentComplete(percentString);
}
clearme = setInterval(randomPercent, 300);
Related
I found this code here: https://stackoverflow.com/a/29017677 .
This is fadeOut function. It's working
var s = document.getElementById('thing').style;
s.opacity = 1;
(function fade(){(s.opacity-=.1)<0?s.display="none":setTimeout(fade,100)})();
var s = document.getElementById('thing').style;
s.opacity = 1;
(function fade(){(s.opacity-=.1)<0?s.display="none":setTimeout(fade,100)})();
#thing {
background: red;
line-height: 40px;
}
<div id="thing">I will fade...</div>
now I am trying to write a function for fadeIn like the fadeOut function. But this function doesn't work. I do not understand why.
var s = document.getElementById('thing').style;
s.opacity = 0;
(function fade(){(s.opacity+=.1)>0.95?s.display="block":setTimeout(fade,100)})();
var s = document.getElementById('thing').style;
s.opacity = 0;
(function fade(){(s.opacity+=.1)>0.95?s.display="block":setTimeout(fade,100)})();
#thing {
background: red;
line-height: 40px;
}
<div id="thing">I will fade...</div>
The best solution for your case would be to use more CSS instead of JS, you can add the property transition to the #thing selector and then all you need to do is set the opacity via JS code(no need to add timeouts or any other form of complicated handling)
function hide() {
document.getElementById('thing').style.opacity = 0
}
function show() {
document.getElementById('thing').style.opacity = 1
}
#thing {
transition: .4s
}
<div id="thing">I am showing up</div>
<button onclick="hide()">hide</button>
<button onclick="show()">show</button>
The += is trying to append, so keep with -= and set your .1 to negative value as -0.1 and it will works.
var s = document.getElementById('thing').style;
s.opacity = 0;
(function fade() {
(s.opacity -= -0.1) < 1 && setTimeout(fade,100);
}
)();
#thing{
background: red;
line-height: 40px;
opacity: 0;
}
<div id="thing">I will fade...</div>
Complementing my answer with Chris G's comment:
The opacity is a string, so appending 0.1 works the first time: "0" + "0.1" is "00.1" which checks out. Then it's "0.1" + 0.1 which is "0.10.1" and gets parsed back into "0.1" - Chris G
How can I create the CSS animation below in JavaScript? I've looked all over Google, and tried multiple times to create this but I couldn't figure out how to do this.
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 100;
}
}
To run this, I know I can use what is shown below, but I don't know how to create this animation. Can anyone help?
element.style.animation = "fadeIn 5s linear";
You can use javascript with transition to achieve it
// start frame
const start = {
opacity: 0
};
// end frame
const end = {
opacity: 1
};
const element = document.querySelector('span');
Object.assign(element.style, start);
element.style.transition = 'all 5s linear';
requestAnimationFrame(() => {
Object.assign(element.style, end);
});
<span>Lorem Ipsum</span>
What do you mean exactly with "Create in Javascript"? Without using CSS?
If so, you can use a simple interval to update the opacity of the element until it reached 0 or 100. Simple example:
let opacity = 0;
const fadeEl = document.getElementById("fadeInElementIdWithOpacity0");
const fadeInInterval = setInterval(() => {
if (opacity < 1) {
opacity = opacity + 0.1
fadeEl.style.opacity = opacity;
} else {
clearInterval(fadeInInterval);
}
}, 200);
You can first define this function with whatever amount of intervals that you want and then call it with any querySelector
function fadeIn(x) {
var fade = document.querySelector(x);
var opacity = 0;
var intervalID = setInterval(function() {
if (opacity < 1) {
opacity = opacity + 0.1
fade.style.opacity = opacity;
} else {
clearInterval(intervalID);
}
}, 200);
}
havnig this function in console and running fadeIn(".-logo") will fade in the stackoverflow's logo
I am doing some animation works with css keyframes.First i need to keep the element's opacity zero then after the animation is end then it would be one(1).I have wrote some jQuery codes and still not works.
Css codes
.slider_img {
position: absolute;
opacity: 0;
left: 24%;
top: 50vh;
animation-name: dropImg;
animation-duration: 2s;
animation-delay: 1s;
transform: translateY(-50%);
}
jQuery
$(window).ready(function() {
$('.slider_img').on("webkitTransitionEnd", function(){
$('.slider_img').css('opacity', 1);
})
});
What sould i do now
Assuming your animation starts when your page loads:
$(document).ready(function() {
var aDuration = parseInt($('.slider_img').css('animation-duration').slice(0, -1)) * 1000;
var aDelay = parseInt($('.slider_img').css('animation-delay').slice(0, -1)) * 1000;
var delay = aDuration + aDelay;
setTimeout(function() {
$('.slider_img').css('opacity', 1);
}, delay);
});
EDIT: Added the delay from animation-delay.
Your problem is that you are using the wrong event transitionend when you should be looking for animationend (plus of course you will need all the prefixes). For example:
$('.slider_img').on('animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd', function() {
$('.slider_img').css('opacity', 1);
});
You could do something like:
$(window).ready(function() {
var sliderImg = $('.slider_img'),
delay = sliderImg.css('animation-duration').replace("s","") * 1000;
setTimeout(function(){
sliderImg.css('opacity', 1);
}, delay);
});
well its a fairly basic code for a slideshow in html using css and javascript.
this is the javascript part how can i add a fade in and fade out to this code without jquery
<script type="text/javascript">
var step = 0
var whichimage = 0
function slideit() {
if (!document.images)
return
document.getElementById('slide').src = slideimages[step].src
whichimage = step
if (step < 3)
step++
else
step = 0
setTimeout("slideit()", 5000)
}
slideit()
</script>
The simplest way would be to use CSS to animate element opacity:
var el = document.getElementById('e');
setInterval(function(){
el.className = el.className == '' ? 'show' : '';
}, 2000);
#e {display: inline-block; width: 50px; height: 50px; background: #afa; opacity: 0; transition: opacity 1s linear}
#e.show {opacity: 1}
<div id="e"></div>
In your case you'd have to set when the previous element fades out and when the new one fades in using setTimeouts. I could write you a more accurate code, but not without seeing the markup/the whole thing. This should be enough to get you started.
Assume I have the following array:
var myarray = [1, 2, 3, 4, 5]
What is the cleanest way using Javascript/CSS3 to make it such that onpage load, each element in the array is shown in a box/div with a red background color on the page? Usually I would just do:
for(var i = 0; i < myarray.length; i++) {
bodyelement.append("<div class="box">"+myarray[i]+"</div>");
}
The issue is, it is super fast and they all just show up instantaneously without any real "effect".
Though how do I make them "sequentially" animate in as it is appended? Say, for example, the box would animate say from a overly big box and shrink down to the size of the actual div, or fade in gradually. Can this be done with CSS3 only or is there javascript required? How can I create this effect?
Here is an example of what I described in the comments. JSFIDDLE.
Basically you use css transitions, and add a class to each element after a certain period of time.
(function() {
var elements = document.querySelectorAll("#test div");
for (var i = 0; i < elements.length; i++) {
load(elements[i], i);
}
function load(elem, i) {
setTimeout(function() {
elem.classList.add("load");
},50 * i);
}
}());
CSS
#test div {
-webkit-transition: opacity 2s ease-in;
-moz-transition: opacity 2s ease-in;
-ms-transition: opacity 2s ease-in;
-o-transition: opacity 2s ease-in;
transition: opacity 2s ease-in;
}
#test div.load {
opacity: 1;
}
This FIDDLE may get you started.
JS
var fadeintime = 500;
animatediv();
function animatediv()
{
var number = 0;
var interval = setInterval(function() {
var divid = $("#div" + number);
divid.animate({opacity: "1"}, fadeintime);
number++;
if(number > 4) clearInterval(interval);
}, 1000);
}
Based on THIS.