I want to implement a jQuery animation callback method progress or step,
but in either case I'm getting the following error:
NS_ERROR_IN_PROGRESS: Component returned failure code: 0x804b000f (NS_ERROR_IN_PROGRESS) [nsICacheEntry.dataSize]
I searched a lot but not able to find anything in context, I am kind of stuck here, please suggest what could cause this error?
In fiddle i tried with step and progress and its working there , but not able to get it worked in my code, I am just looking, has some one faced such kind of error in jquery animation?
The sample code is:
this.taskHandle.find('img').stop(true, true).animate({
//todo//
top: vtop, // this.taskHandle.outerHeight(),
//'top': 0 - $('.target.upper').height(),
width: 0,
opacity: 0
}, {
duration: 2000,
step: function(){
console.log('I am called');
}
},
$.proxy(function() {
// some css clearing method
}, {
// some further actions after animation completes
})
);
You have some semantic errors going on here. I'm going to repost your code, formatted for easier reading:
this.taskHandle.find('img')
.stop(true, true)
.animate(
{
//todo//
top: vtop , // this.taskHandle.outerHeight(),
//'top' : 0 - $('.target.upper').height(),
width : 0,
opacity : 0
},
{
duration:2000,
step: function() {
console.log('I am called');
}
},
$.proxy(
function() {
// some css clearing method
},
{
// some further actions after animation completes
}
)
);
First: animate() doesn't accept 3 parameters (at least not those 3 parameters). I'm not sure what you are trying to do with your css clearing method, but anything you wan't to happen after the animation is complete should be in the complete method that you add right next to the step method.
Second: $.proxy() needs to have the context in which you want it to run as the second parameter, not some other"complete"-function.
So here is a slightly modified example which works. You can try it yourself in this fiddle.
var vtop = 100;
$('div')
.stop(true, true)
.animate(
{
top: vtop,
width: 0,
opacity : 0
},
{
duration: 2000,
step: function() {
console.log('I am called');
},
complete: function () {
alert('complete');// some further actions after animation completes
}
}
);
You could use Julian Shapiro's Velocity.js, which animations are (arguable) faster than jQuery and CSS (read this for more)
It allows you to use callbacks such as :
begin
progress
complete
like :
var vtop = 100;
jQuery(document).ready(function ($) {
$('div').find("img").velocity({
top: vtop,
width: 0,
opacity: 0
}, {
duration: 2000,
begin: function (elements) {
console.log('begin');
},
progress: function (elements, percentComplete, timeRemaining, timeStart) {
$("#log").html("<p>Progress: " + (percentComplete * 100) + "% - " + timeRemaining + "ms remaining!</p>");
},
complete: function (elements) {
// some further actions after animation completes
console.log('completed');
$.proxy( ... ); // some css clearing method
}
});
}); // ready
Notice that you just need to replace .animate() by .velocity()
See JSFIDDLE
Related
So I am trying to animate .load('content.html') function by doing this.
function loadContent(c) {
$('#main-container').stop().animate({
opacity: 0,
}, 300, function() {
$('#main-container').load('./content/' + c + '.html');
$(this).stop().animate({
opacity: 1,
}, 600);
});
}
It is pretty straight forward, I want to animate opacity to 0, load new content and animate opacity back to 1. The problem is that content loads immediately after function is called so content changes before 'opacity 0' happens. I tried also this piece of code
function loadContent(c) {
$('#main-container').stop().animate({
opacity: 0,
}, 300, function() {
setTimeout(function() {
$('#main-container').load('./content/' + c + '.html');
}, 600);
$(this).stop().animate({
opacity: 1,
}, 600);
});
}
But it is same result. Any hints?
I think it has something to do with .animation() event being asynchronous.
Both codes above, and both answers work just fine I had typo in my code (as whole) so I was calling .load() function before loadContent(c) itself, result was that content loaded immediately, animation started -> content loaded second time -> animation ended.
You need to pass your last animation as a callback function to load():
function loadContent(c) {
$('#main-container').stop().animate({
opacity: 0
}, 300, function() {
$('#main-container').load('./content/' + c + '.html', function() {
$(this).stop().animate({
opacity: 1
}, 600);
});
});
}
Here's a Fiddle: http://jsfiddle.net/Lp728/
how about:
function loadContentCOMMAS(c) {
$('#main-container').stop().animate({
opacity: 0
}, 300);
$('#main-container').promise().done(function () {
$('#main-container').load(c,function () {;
$(this).stop().animate({
opacity: 1
}, 600);
});
});
}
EDIT:
here is a FIDDLE
I am trying to "do some stuff" at the end of this crazy animation loop... The alert I have commented out at the end of the animation works great... However, what I really need it to do is remove/hide the closest div with a class of .item (something like this)
var jremove = $(this).closest('.item').hide();
$container.masonry('remove', jremove );
//Then trigger a reload function for masonry
reloadMasonry(); // not working yet
When I try do do anything but alert a simple message I get an error like this:
Uncaught TypeError: Object #<HTMLImageElement> has no method 'closest'
You can see it at the bottom of the animation below:
jQuery(function ($) {
$("body").on("click", ".clip_it", function () {
if ($(this).parent().find(".clip_it").length<1){
$(this).after('<a class="clip_it" href="javascript:void(0)" onclick="">CLIP IT!</a><img src="http://img.photobucket.com/albums/v29/wormholes201/animated-scissors.gif" class="ToBeAnimated">');
}
animationLoop($(this).closest(".item-inner").eq(0),$(this).parent().find(".ToBeAnimated").eq(0));
});
});
function animationLoop(ctx,ctx2) {
ctx2.fadeIn();
ctx2.css({
top: (0 - parseInt(ctx2.height()) / 2),
left: (0 - parseInt(ctx2.width()) / 2),
position:"absolute",
"z-index":800
}).rotate(270);
ctx2.animate({
top: ctx.height() - ctx2.height() / 2
}, 1000, function () {
ctx2.animate({
rotate: "180deg"
}, 1000, function () {
ctx2.animate({
left: ctx.width() - ctx2.width() / 2
}, 1000, function () {
ctx2.animate({
rotate: "90deg"
}, function () {
ctx2.animate({
top: 0-ctx2.height() / 2
}, 1000, function () {
ctx2.animate({
rotate: "0deg"
}, function () {
ctx2.animate({
left: (0 - parseInt(ctx2.width()) / 2)
}, 1000, function () {
setTimeout(animationLoop(ctx,ctx2), 1000);
//I want to remove the coupon (.item) & reload masonry here
// TEST ALERT WORKS = alert("animation complete");
var jremove = $(this).closest('.item').hide();
$container.masonry('remove', jremove );
reloadMasonry();
return false;
});
});
});
});
});
});
});
}
I am open to other suggestions if you think there is a better way? THANKS FOR HELPING!
Uncaught TypeError: Object #<HTMLImageElement> has no method 'closest'
The problem is that $ outside of your ready handler (the function you're passing into jQuery(function($) { ... });) is not pointing to jQuery, it's pointing to something else (my guess would be Prototype or MooTools). So $(this) returns an HTMLImageElement (probably enhanced by Prototype or MooTools) rather than a jQuery object, and so it has no closest function.
Either move the animationLoop function into your ready handler (so it sees the $ that jQuery passes into the ready handler instead of the global), or use jQuery instead of $ in that function.
I have a timeline definition which lists selectors and a list of delays and animations to apply to that object. You can specify that the steps for a particular object be looped.
Here is the function that's used to queue the animations:
function animateWithQueue(e, obj) {
if ($.queue(e[0]).length == 0) {
e.queue(function doNext(next) {
$.each(obj.steps, function(i, step) {
e.delay(step.pause).animate(step.anim, step.options);
});
if (obj.loop) {
e.queue(doNext);
}
next();
});
}
}
Here is the timeline information
var timeline = {
'.square': {
loop: true,
steps: [
{ pause: 800, anim: { right: '+=200' }, options: { duration: 400} },
{ pause: 1000, anim: { right: '-=200' }, options: { duration: 400} }
]
},
'.circle': {
loop: true,
steps: [
{ pause: 1200, anim: { top: '+=200' }, options: { duration: 400} },
{ pause: 1200, anim: { top: '-=200' }, options: { duration: 400} }
]
}
};
And here is the function that puts the timeline into the above animate function:
$.each(timeline, function(selector, obj) {
animateWithQueue($(selector), obj);
});
Here is a full example. http://jsfiddle.net/sprintstar/Tdads/
This code appears to work fine, the animations loop and the stop button can be clicked to stop the animations, clear the queues etc. However the issue we're facing can be triggered by hitting stop and start over and over (say 10 times). Then notice that the delays are not functioning correctly any more, and the shapes move about much faster.
Why is this, and how can it be fixed?
Something is not working quite right with delay...
As a work around, I've replaced it with doTimeout in this fiddle, so the following:
e.delay(step.pause).animate(step.anim, step.options);
Becomes:
var timerName = e[0].className + $.now();
timeouts.push(timerName);
e.queue(function(next) {
e.doTimeout(timerName, step.pause, function() {
this.animate(step.anim, step.options);
next();
});
});
timeouts is an array of unique timeout ids - each of which is cleared when the stop button is pressed.
As I've said, more of a workaround than a fix, as you'll also need to reset the position of the elements on stop too. (notice I've removed the += and -= from the top/right definitions)
looking at your stop handler i woudl suspect the .stop() to be miss placed.
i would target it on .circle and .square instead of the holding div.
Had an issue once with animate, as the element was moving faster and faster and faster and cam to the conclusion that animate was stacking up on himself.
api.jquery.com/clearQueue/ and http://api.jquery.com/stop/ might be usefull
I'm trying to animate a set of elements simultaneously (almost, there's a small delay between each animation):
$('.block').each(function(i){
$(this).stop().delay(60 * i).animate({
'opacity': 1
}, {
duration: 250,
complete: mycallbackfunction // <- this fires the callback on each animation :(
});
});
How can I run a callback function after all animations have completed?
Use a closure around a counter variable.
var $blocks = $('.block');
var count = $blocks.length;
$blocks.each(function(i){
$(this).stop().delay(60 * i).animate({
'opacity': 1
}, {
duration: 250,
complete: function() {
if (--count == 0) {
// All animations are done here!
mycallbackfunction();
}
}
});
});
Note the saving of the list of items into the $block variable to save a lookup.
Since jQuery 1.5, you can use $.when [docs], which is a bit easier to write and understand:
var $blocks = $('.block');
$blocks.each(function(i){
$(this).stop().delay(60 * i).animate({
'opacity': 1
}, {
duration: 250
});
});
$.when($blocks).then(mycallbackfunction);
DEMO
Felix Kling's answer will fire the callback when there's no animation left to do. This makes the callback firing even if the animation is stopped via $el.stop() and thus not completed to the end.
I found an method by Elf Sternberg using deferred objects which I implemented in this jsfiddle:
http://jsfiddle.net/8v6nZ/
var block = $('.block');
block.each(function(i){
$(this).stop().delay(60 * i).animate({
'opacity': 1
}, {
duration: 250,
complete: i== (block.length-1) ? myCallbackFunction : function(){}
});
});
$('.block').each(function(i){
$(this).stop().delay(60 * i).animate({
'opacity': 1
}, {
duration: 250,
complete: ((i == $('.block').length - 1) ? mycallbackfunction : null)
});
});
Is it possible to run two animations on two different elements simultaneously? I need the opposite of this question Jquery queueing animations.
I need to do something like this...
$('#first').animate({ width: 200 }, 200);
$('#second').animate({ width: 600 }, 200);
but to run those two at the same time. The only thing I could think of would be using setTimeout once for each animation, but I don't think it is the best solution.
yes there is!
$(function () {
$("#first").animate({
width: '200px'
}, { duration: 200, queue: false });
$("#second").animate({
width: '600px'
}, { duration: 200, queue: false });
});
That would run simultaneously yes.
what if you wanted to run two animations on the same element simultaneously ?
$(function () {
$('#first').animate({ width: '200px' }, 200);
$('#first').animate({ marginTop: '50px' }, 200);
});
This ends up queuing the animations.
to get to run them simultaneously you would use only one line.
$(function () {
$('#first').animate({ width: '200px', marginTop:'50px' }, 200);
});
Is there any other way to run two different animation on the same element simultaneously ?
I believe I found the solution in the jQuery documentation:
Animates all paragraph to a left style
of 50 and opacity of 1 (opaque,
visible), completing the animation
within 500 milliseconds. It also will
do it outside the queue, meaning it
will automatically start without
waiting for its turn.
$( "p" ).animate({
left: "50px", opacity: 1
}, { duration: 500, queue: false });
simply add: queue: false.
If you run the above as they are, they will appear to run simultaenously.
Here's some test code:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
$(function () {
$('#first').animate({ width: 200 }, 200);
$('#second').animate({ width: 600 }, 200);
});
</script>
<div id="first" style="border:1px solid black; height:50px; width:50px"></div>
<div id="second" style="border:1px solid black; height:50px; width:50px"></div>
While it's true that consecutive calls to animate will give the appearance they are running at the same time, the underlying truth is they're distinct animations running very close to parallel.
To insure the animations are indeed running at the same time use:
$(function() {
$('#first').animate({..., queue: 'my-animation'});
$('#second').animate({..., queue: 'my-animation'});
$('#first,#second').dequeue('my-animation');
});
Further animations can be added to the 'my-animation' queue and all can be initiated provided the last animation dequeue's them.
Cheers,
Anthony
See this brilliant blog post about animating values in objects.. you can then use the values to animate whatever you like, 100% simultaneously!
http://www.josscrowcroft.com/2011/code/jquery-animate-increment-decrement-numeric-text-elements-value/
I've used it like this to slide in/out:
slide : function(id, prop, from, to) {
if (from < to) {
// Sliding out
var fromvals = { add: from, subtract: 0 };
var tovals = { add: to, subtract: 0 };
} else {
// Sliding back in
var fromvals = { add: from, subtract: to };
var tovals = { add: from, subtract: from };
}
$(fromvals).animate(tovals, {
duration: 200,
easing: 'swing', // can be anything
step: function () { // called on every step
// Slide using the entire -ms-grid-columns setting
$(id).css(prop, (this.add - this.subtract) + 'px 1.5fr 0.3fr 8fr 3fr 5fr 0.5fr');
}
});
}
Posting my answer to help someone, the top rated answer didn't solve my qualm.
When I implemented the following [from the top answer], my vertical scroll animation just jittered back and forth:
$(function () {
$("#first").animate({
width: '200px'
}, { duration: 200, queue: false });
$("#second").animate({
width: '600px'
}, { duration: 200, queue: false });
});
I referred to: W3 Schools Set Interval and it solved my issue, namely the 'Syntax' section:
setInterval(function, milliseconds, param1, param2, ...)
Having my parameters of the form { duration: 200, queue: false } forced a duration of zero and it only looked at the parameters for guidance.
The long and short, here's my code, if you want to understand why it works, read the link or analyse the interval expected parameters:
var $scrollDiv = '#mytestdiv';
var $scrollSpeed = 1000;
var $interval = 800;
function configureRepeats() {
window.setInterval(function () {
autoScroll($scrollDiv, $scrollSpeed);
}, $interval, { queue: false });
};
Where 'autoScroll' is:
$($scrollDiv).animate({
scrollTop: $($scrollDiv).get(0).scrollHeight
}, { duration: $scrollSpeed });
//Scroll to top immediately
$($scrollDiv).animate({
scrollTop: 0
}, 0);
Happy coding!