I have an element which should be animated all the time.
The animated element has such CSS properties:
#world {
height: 100%;
max-height: 100%;
position: relative;
display: flex;
background :red;
}
I can only move the element to a particular way, like this:
$('#world').animate({right: "2000px", easing: "linear"}, 2000);
But this will just animated for 2000px my element has an endless width.
UPDATE:
ALL 7.5 Sec. #world become bigger.
FIDDLE
You can have a recursive function:
var anim;
anim = function(times) {
$('#world').animate({
right: 2000 * times
}, 2000, 'linear');
return anim(times + 1);
};
anim(1)
This will continue to move #world to the right, 1 pixel per millisecond.
With a step callback:
var anim, my_step_callback;
my_step_callback = function() {
return $('body').append("<p>Hello</p>");
};
anim = function(times) {
$('#world').animate({
right: 2000 * times
}, {
duration: 2000,
easing: 'linear',
step: my_step_callback
});
return anim(times + 1);
};
Good luck!
Why not use right: 100%?
Assuming im reading your question correctly.
You could always do something like this, Where the function calls itself over and over again each time the animation ends.
function moveMe() {
$('#world').animate({width: '+=100px', easing: "linear"}, 2000, moveMe);
}
Why not set the righta value to the width of the element
var width = $('#world').width();
$('#world').animate({right: width, easing: "linear"}, 2000);
You could also increment the value of right as follows
DEMO http://jsfiddle.net/meqk662p/
var counter = 0;
setInterval(function () {
++counter;
}, 100);
$('#world').animate({right: counter+"px", easing: "linear"}, 2000);
The above example would be infinite
try increment the right and call in the callback the same function
var world_right = 2000;
function endlessWorldStep(){
$('#world')
.animate({right: world_right + "px", easing: "linear"}, 2000, endlessWorldStep);
world_right = world_right + 100;
}
Related
I saw this codepen: https://codepen.io/alex_rodrigues/pen/ogYZdr You can see the javascipt code here:
setTimeout(function start (){
$('.bar').each(function(i){
var $bar = $(this);
$(this).append('<span class="count"></span>')
setTimeout(function(){
$bar.css('width', $bar.attr('data-percent'));
}, i*100);
});
$('.count').each(function () {
$(this).prop('Counter',0).animate({
Counter: $(this).parent('.bar').attr('data-percent')
}, {
duration: 2000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now) +'%');
}
});
});
}, 500)
I want the graph to complete the animation, stall for 3-5 seconds then repeat the animation. Currently, it completes the animation, but there is no loop. Any help is much appreciated. Thank you!
You can create a function that:
Resets the bar's width and content
Restarts the animation.
This function can be set to be called after:
($('.bar').length - 1) * 100 + 2000 + your_chosen_delay_in_ms
For this to work, we have to pull out all the things that don't need repeating, like $(this).append('<span class="count"></span>').
Combined, it would look like this:
var animation_offset = 100;
var animation_duration = 2000;
var reanimate_delay = 3000;
function animateBars() {
$('.bar').each(function(i){
var $bar = $(this);
setTimeout(function(){
$bar.css('width', $bar.attr('data-percent'));
}, i*animation_offset);
});
$('.count').each(function () {
$(this).prop('Counter',0).animate({
Counter: $(this).parent('.bar').attr('data-percent')
}, {
duration: animation_duration,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now) +'%');
}
});
});
setTimeout(
reAnimateBars,
(
($('.bar').length - 1) * animation_offset // Moment the last bar starts animating
+ animation_duration // Animation duration
+ reanimate_delay // Your chosen delay
)
);
}
function reAnimateBars() {
// Reset the bars
$('.bar .count').text('');
$('.bar').css('width', '0%');
// This will take some time (as per CSS transition property) to reset.
// So we have to wait for that too.
// Start the animation (again)
// after CSS transition time for resetting is over
setTimeout(animateBars, animation_duration);
}
setTimeout(function() {
// Put non-repeating things here:
$('.bar').append('<span class="count"></span>');
// Start animation (first time)
animateBars();
}, 500);
I'm trying to use math.random to animate the characters of these words by a random amount with math.random and it isn't working.
Is it a problem with my math DEMO
$('.reverse_button').on('click', function(){
var chars = $('.reverse_body').blast({
delimiter: 'character'
});
var moveup=parseInt((Math.random()* document.body.clientHeight) - document.body.clientHeight);
var moveleft=parseInt((Math.random()* document.body.clientWidth) - document.body.clientWidth);
chars.each(function(idx,obj) {
$(obj).animate({
left: moveleft,
top: moveup
});
});
});
This is what I'm trying to get work first. There is an error here.
$('.reverse_button').on('click', function(){
var chars = $('.reverse_body').blast({
delimiter: 'character'
});
chars.each(function() {
$(this).animate({
left: 100,
top: 100
}, 500);
});
});
#KevinB
I needed to give the effected element a position of relative. Here is the working code and demo.
$('.reverse_button').on('click', function(){
var chars = $('.reverse_body').blast({
delimiter: 'character'
});
chars.each(function() {
var moveup=parseInt((Math.random()* document.body.clientHeight) - document.body.clientHeight);
var moveleft=parseInt((Math.random()* document.body.clientWidth) - document.body.clientWidth);
$(this).css({
position: 'relative',
left: 0
})
.animate({
left: moveleft,
top: moveup
}, 1500);
});
});
DEMO
However it still isn't animating a negative amount, anyone know a formula to create a random negative number?
I have a group of shapes in fabric.js version 1.6.0-rc.1 and I am trying to animate a rotation for every 2 seconds from the center of the group, I have tried to implement the code from here:
http://fabricjs.com/shadows/
Here is what I came up with:
// Group the shapes together.
patrolGroup = new fabric.Group([circlePatrolPath, patrolManPlusVision], {
top: 300,
left: 300,
originX: 'center',
originY: 'center',
});
patrolGroup.animate({ angle: -360 }, {
easing: fabric.util.ease.easeOutCubic,
duration: 2000,
onChange: canvas.renderAll.bind(canvas),
onComplete: function onComplete() {
console.log(Math.round(patrolManPlusVision.angle)),
patrolManPlusVision.animate({
angle: Math.round(patrolManPlusVision.angle) === 360 ? -360 : 360
}, {
duration: 2000,
onComplete: onComplete
});
}
});
This only rotates 360 degrees once, I want it to be continuous. I thought the onComplete part would keep it rotating, I can see the angle is changing every two seconds in the console log but this is not being reflected in the animation.
I found a way to do it using javascript interval function:
var counter = 0;
var myInterval = setInterval(function () {
counter-=5;
simulatePatrol()
}, 1000);
function simulatePatrol() {
console.log(counter);
//patrolGroup.animate({ angle: 60 });
patrolGroup.animate('angle', counter, {
onChange: canvas.renderAll.bind(canvas)
});
}
Not sure if this is the best way to do it, but it works. I also found out why the original code was not working. It turns out that I did not bind the events properly. The code now looks like this and is working:
var rotationDegrees = -10;
patrolGroup.animate({ angle: rotationDegrees }, {
duration: 1000,
onChange: canvas.renderAll.bind(canvas),
onComplete: function onComplete() {
//console.log(Math.round(patrolManPlusVision.angle)),
patrolGroup.animate({
angle: rotationDegrees-=10
}, {
duration: 1000,
onChange: canvas.renderAll.bind(canvas),
onComplete: onComplete
});
}
});
The onChange: canvas.renderAll.bind(canvas), was needed for each animation.
I have an element div in a shape of a ball. What I am trying to do is, when I refresh the page I want to the ball to fall to the bottom of the webpage and then bounce back up to the top of the page.
This is my jQuery function where the ball falls to the bottom of the web page
$(document).ready(function(){
$("div").animate({ top: '+=585'}, 400);
});
Am I using a correct approach? Should I use slideDwon and slideUp instead?
Try utilizing jQuery UI .effect()
$(function() {
var div = $("div");
// `elem`: element to apply bounce effect,
// `n`: number of bounce effects to apply to `elem`
var bounce = function bounce(elem, n) {
var fx = function fx(el) {
return (el || $(this))
.effect({
effect: "bounce",
easing: "swing",
duration: 400,
distance: window.innerHeight
- (el.height() + el.offset().top * 1.5),
direction: "down",
times: 1
}).promise()
};
return fx(elem).then.apply(elem, $.map(Array(n - 1), function() {
return fx(elem)
}));
};
bounce(div, 1).then(function(el) {
// do stuff when bounce effect complete
console.log("complete", el)
});
});
div {
position: relative;
width: 100px;
height: 100px;
background: rgb(212, 98, 44);
border: 2px solid navy;
border-radius: 50%;
}
<link href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"
rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div></div>
Take advantage of jQuery's animation chainability. Also, you probably shouldn't assume a static value of 585 will be suitable for every screen size. I suggest using calculated values for generating the offsets, check this fiddle:
$(document).ready(function () {
var viewportH = $(window).height();
var elem = $('div');
var elemH = elem.height();
elem.animate({
top: '+=' + (viewportH - elemH) // bottom of screen
}, 400).animate({
top: '-=' + (viewportH - elemH) // original position
});
});
Using this HTML :
<div id="myDiv" class="myRelativeDiv">test</div>
1st step is to set the position of your div as "relative" :
.relative {
position:relative;
}
2nd step is animate with Jquery (You can chain many animate):
$(function() {
$("#myDiv").animate({ top: '+=585'}, 400).animate({ top: '0'}, 400);
});
JsFiddle
$(document).ready(function(){
$("div").animate({ top: '+=585'}, 400);
setTimeout(
function()
{
$("div").animate({ top: '-=585'}, 400);
}, 400);
});
Suppose you have an animation running with a certain time like this:
$('span').animate({opacity : 1}, 10000);
The animation is quite long so the user tries clicking the button again. The animation will be a certain amount of time through the animation already, which is probably going to be different every time.
On the second click is it possible to update the animation process keeping the opacity of the object when the user clicks, just changing the time it will take to finish?
Basically I want to update the animation process mid way through the animation.
You can use the step option of animate to keep track of how far along the animation is. Then with that information, you can calculate the time remaining in the animation. Then stop the current animation and start a new one with half the duration.
http://jsfiddle.net/MdD45/
EDIT
It looks like the 2nd parameter passed to step contains a property named pos which tells you what percentage along in the animation you are. That can simplify things further.
http://jsfiddle.net/MdD45/1/
var startVal = 0;
var endVal = 1;
var duration = 10000;
var howfar = 0;
$('span').css("opacity",startVal)
.animate({
opacity : endVal
}, {
duration: duration,
step: function(now, fx){
howfar = fx.pos; // between 0 and 1, tells how far along %
}
});
$("button").click(function(){
// calculate the new duration as half of the remaining duration
var timeRemaining = duration - (howfar * duration);
duration = timeRemaining / 2;
$('span').stop().animate({
opacity : endVal
}, {
duration: duration,
step: function(now, fx){
howfar = fx.pos; // between 0 and 1, tells how far along %
}
});
});
I put something together yesterday to skip in jQuery animations, here's the code, it should be pretty easy to modify for your use-case:
EDIT: Modified version:
Demo: http://jsfiddle.net/SO_AMK/fJyKM/
jQuery:
var time = 10000;
var opacity = 1;
var currentTime = 0;
$("#square").animate({
opacity: opacity
}, {
duration: time,
step: function(now, fx) {
currentTime = Math.round((now * time) / opacity);
},
easing: "linear"
});
$("#hurry").click(function() {
$("#square").stop().animate({
opacity: opacity
}, {
duration: ((time - currentTime) / 4), // Get remaining time, divide by 4
step: function(now, fx) {
currentTime = Math.round((now * time) / opacity);
},
easing: "linear"
});
});
It also works for other properties, like width. The only catch is that if it is a decreasing value than you need to use a different script.
yes you can ..
You have to stop the animation with "stop()" method then start a new animation against the same node on the same property and as a target value, the original one.
I'm not fully sure if this would work, but consider doing like this:
<div id="box"></div>
<style type="text/css">
div#box {
-webkit-transition: width 10s;
-moz-transition: width 10s;
transition: width 10s;
background: #000;
width: 100px;
}
div#box.speedy {
-webkit-transition: width 5s;
-moz-transition: width 5s;
transition: width 5s;
}
</style>
<script style="text/javascript">
$(function() {
$('div#box').css('width', '400');
setTimeout(function() {
$('div#box').addClass('box');
}, 2000);
});
</script>
Basicly let css animate it, and add another class that speeds the transition up.