Ok, I was doing a simple JQuery animation. When a user will click on an image,it will move to the left by 1000px. Here is the code below:
function cloud2 () {
$('#cloud2').animate({left:'1000px'},40000);
setTimeout(cloud2,2000);
}
$(document).ready(function() {
$('#cloud2').click(function() {
cloud2();
});
});
Very nice nothing is wrong, all is working like a BOSS! When the image reaches 1000px, it stops. All good! What I want now, is to replace the image with another image once it stops when it completes the 1000px animation. How to do that? For example, once it stops, the image changes to another one, let's say image2.jpg for instance.
Thank!
animate() has an event for ending animation.
For example you have something like:
<img src="image1.jpg" id="myimg">
function moveimg() {
$('#myimg').animate({left: '1000px'}, 40000, function() {
$('#myimg').attr('src', 'image2.jpg');
});
}
setTimeout("moveimg()", "2000")
Related
Hi I am developing an application with Fabric.js where the user would enter some string and upon clicking on the delete image last word will be deleted and the image would shift to the left.
I am using image like
fabric.Image.fromURL(srcImg, function (oImg) {
canvas.add(oImg);
oImg.set('left',0);
oImg.set('top', 100);
oImg.scale(.55);
canvas.renderAll();
// and then, we can animate the image
oImg.animate('left', 100, {
onChange: canvas.renderAll.bind(canvas)
});
oImg.on('mouse:down', function() {
//some function here
});
});
Now I want to use the click and the animate outside of the add function, but I get an error undefined index oImg. I want to use click and animate elsewhere so that I can remove the last word and use animate to shift the image to the left I am using text for click and the animate right now but I would like to use image.
fabric.Image.fromURL is an asynchronous method, so it is normal that it will throw an error of undefined calling it just below it. You have mainly two solutions here:
Add the event listener inside the callback:
fabric.Image.fromURL('//lorempixel.com/200/200/', function(img) {
img2 = img
...
img2.on('mousedown', function () {
console.log('throws an error');
});
});
Call events binding function (always after img2 was created)
fabric.Image.fromURL('//lorempixel.com/200/200/', function(img) {
img2 = img
...
bindImageEvents(img2)
});
function bindImageEvents (imageObject) {
imageObject.on('mousedown', function () {
console.log('Something...');
});
}
It's been a REALLY long time since using Flash and now have to use Adobe Animate for an HTML 5 Canvas project. I created the animation, set all the actions on the timeline to stop the timeline where I need it to be but now I need to know how to play the animation again from outside of another JS file (custom.js) inside my Animate JS file (animate.js)
I've read a ton of articles and most reference the scope of this being the problem.
Here's how I would imagine this would work.
// On scroll of div
<div onscroll="myFunction()">
// inside my custom.js
myFunction() {
this.gotoAndPlay(2);
};
Some have said to set a var of
var that=this;
And then calling that.gotoAndPlay(2);
Many thanks
Animate declares a global (window) variable exportRoot on publish that points to the root timeline.
As a demonstration, if you put this code on the root timeline:
alert(exportRoot === this);
You should see "true".
Thanks to ClayUUID
<script type="text/javascript">
function playTimeLine () {
//alert ("working");
exportRoot.gotoAndPlay(30);
}
</script>
<button onclick="playTimeLine()">PRESS</button>
I'm starting my jQuery studies. I am having difficulties making a continuous slide animation, with images of some clients passing by the screen. Everything is good until I try to PAUSE the function when the user passes the mouse over the <ul> that is passing. When this occurs, the animation stops. But to restart, it takes a short delay (even with the .clearQueue();) this short delay remains. how do I correct this to eliminate the delay?
The function:
animar('.clientesHome ul');
// pauses / iniciate animation
$('.clientesHome ul').hover(
function () {
$('.clientesHome ul').clearQueue();
$('.clientesHome ul').stop();
},
function () {
$('.clientesHome ul').clearQueue();
animar('.clientesHome ul');
}
);
function animar(oque) {
if(!stoped){
$(oque).css('left', $(oque).position().left);
$(oque).clearQueue();
var regressivo = 2000;
$(oque).animate({
left: '-' + $('.clientesHome ul li').width() + 'px'
}, regressivo ,
'linear',
function (){
//
$('.clientesHome ul li:first').clone().appendTo('.clientesHome ul');
$('.clientesHome ul li:first').remove();
$(oque).css('left','0');
animar(oque);
});
}
}
When you're trying to find the bug, the best way it to strip down the code, to make it as simple as you can. This is your code striped down in jsfiddle: http://jsfiddle.net/r86Hk/. This example works just fine, there's no delay. In order to find your bug, start adding features of your code one by one, and when you see the delay, you've found your bug.
Without your original HMLT/CSS, this is the best I can do.
As you may know, if you chain jQuery animations together using the "complete" parameter, each animation happens in succession only after the previous is complete.
I have a chain, like this:
$('#foobar').load(url, function(){
$(this).fadeIn(time, function(){
$(this).scrollTop(position, time, function() {
$(this).css({'color':'#58e'})
});
});
});
This chain will execute something like this: first load content, then fade in, then scroll to the top, then finally change the css color.
What I want is this: first load the content, then fade in and scroll to the top at the same time, then finally change the color after fadeIn and scrollTop are both done.
Let's say the scrollTop animation takes twice as long than the fadeIn animation. What simple piece of code would I add to my code so that the scrollTop callback in fadeIn DOESN'T wait for the fadeIn animation to complete. The css() animation will wait for the scrollTop animation to complete, like normal.
So the only change (whatever it might be) would affect the callback within fadeIn where scrollTop is called. I'm guessing it might have to do with manipulating the queue?
Thanks for the help!
EDIT: Here's the solution as hinted by Andrew:
First, my original code which loads each custom function in order:
show_loader(0, function() {
close_box($target_close, '/', '#' + $target_close.attr('id') + ' .post_wrap', function() {
open_box($target_open, event.value, '.wide-col', function() {
hide_loader(function() {
scroll_to_content($target_open);
});
$target_close = $target_open;
});
});
});
Now I want close_box and open_box to execute asynchronously (at the same time), so I changed it to this:
show_loader(0, function() {
close_box($target_close, '/', '#' + $target_close.attr('id') + ' .post_wrap');
open_box($target_open, event.value, '.wide-col', function() {
hide_loader(function() {
scroll_to_content($target_open);
});
$target_close = $target_open;
});
});
Now close_box and open_box animations happen at the "same time".
Move the code that animates scrollTop outside of the callback to the fadeIn function:
$('#foobar').load(url, function() {
$(this).fadeIn(time);
$(this).scrollTop(position, time, function() {
$(this).css({'color':'#58e'});
});
});
I'm trying to display an image while I'm doing some Ajax updating (which I've placed in a queue). Here's the code
$(".SaveButton").click(function () {
$(".SavingImage").fadeIn("fast");
$(this).dequeue("Updates");
$(".SavingImage").fadeOut("fast");
$(".ResultItem").data("isDirty", false)
});
.show() and .hide() work, but not the animations. Let me know if more code is needed, I figured this would suffice.
you need to add the function in the call back of the animate function. Something like this:
$(".SaveButton").click(function () {
$(".SavingImage").fadeIn("fast",function(){
$(this).dequeue("Updates");
});
$(".SavingImage").fadeOut("fast");
$(".ResultItem").data("isDirty", false));
});