I want to delay things like the css from happening but this method wont work. Any ideas on how I can delay tasks.
$(function() {
$('.btn').click(function() {
$('.divOne').animate({"left": "+=400px"}, "fast").delay(800).css("background-color","yellow");
});
});
You can use .queue() to stick it on the default animation (fx) queue, like this:
$('.btn').click(function() {
$('.divOne').animate({"left":"+=400px"}, "fast").delay(800).queue(function(n) {
$(this).css("background-color","yellow");
n(); //call next function in the queue, needed if you animate later!
});
});
You can test it here, all this does is stick it in the fx queue using .queue(function(n)), the n is the next function in the queue, so we're calling it, for example if you didn't do this and added any animation after it, it just wouldn't run, because the next function or .dequeue() isn't called.
Maybe use a callback function on the animate. Once the animation is complete use a setTimeout()
$(function() {
$('.btn').click(function() {
$('.divOne').animate({"left": "+=400px"},"fast", function() {
var $elem = $(this);
setTimeout(function() {
$elem.css('background-color','yellow');
}, 800);
})
});
This might not be syntactically perfect.
Related
simple question why doesn't this code work?
<script>
function test( jQuery ){
$("#fade").delay(500).fadeIn(4000);
$("#fade2").delay(500).fadein(4000);
}
$( document ).ready( test );
</script>
Please keep in mind that i am new to jQuery
Thanks
The only possible reason I can think of is the element is not hidden initially - for fadeIn() to work the elements has to be hidden first.
So either hide it using script
function test(jQuery) {
$("#fade").hide().delay(500).fadeIn(4000);
$("#fade2").hide().delay(500).fadeIn(4000); //typo
//this can be shorten to
//$("#fade, #fade2").hide().delay(500).fadeIn(4000);
}
$(document).ready(test);
or using css
#fade, #fade2 {
display: none;
}
delay() pauses chains of methods in the queue. You could also try raw setInterval instead:
function test(){
var animation = setInterval(function(){
//whatever here is run after 500 ms
$("#fade").fadeIn(4000);
$("#fade2").fadein(4000);
clearInterval(animation); //we prevent the loop so it only runs once
}, 500);
}
$(document).ready(test);
Or something like this so you won't need to type document ready event for each method:
function test(){
var animation = setInterval(function(){
//whatever here is run after 500 ms
$("#fade").fadeIn(4000);
$("#fade2").fadein(4000);
clearInterval(animation); //we prevent the loop so it only runs once
}, 500);
}
$(document).ready(function(){
//I like this approach better.
test();
});
I've tried a few different ways except the right one.
Trying this:
setTimeout( function() {
$('.historyTextBoxes p')
.bind('showText', function(e) {
$(this).fadeIn(800, function(){
$(this).next().length && $(this).next().trigger("showText");
});
}).eq(0).trigger('showText');
}, 4000);
Will wait for 4 seconds, then fade each paragraph in, one after another at the speed of .800 miliseconds.
What I want to do is fade a paragraph in at .800 ms, then wait for 4 seconds before the next paragraph fades in.
The basic set-up of:
$('.historyTextBoxes p')
.bind('showText', function(e) {
$(this).fadeIn(800, function(){
$(this).next().length && $(this).next().trigger("showText");
alert('pause here');
});
}).eq(0).trigger('showText');
works but I've yet to hit the right syntax to make it pause where the alert is.
I tried throwing a call to a function but I don't need to run anything except just to wait.
So in pseudo code, I'm trying to define something like:
function wait() {
pause(for 4 seconds);
}
Then I could just call that function instead of the alert above. My issues with setTimeout has been 'having' to define a function but I'm over thinking something.
Using setTimeout was correct, but you applied it in the wrong place.
$('.historyTextBoxes p').bind('showText',function(e) {
$(this).fadeIn(800,function(){
// this is the callback after the fadein
// here we want to wait (use a timeout)
var next = $(this).next();
if (next.length)
setTimeout(function() {
// before the next text is shown
next.trigger("showText");
}, 4000);
})
}).eq(0).trigger('showText');
This should do it:
function showAll() {
var p = $('.historyTextBoxes p').get(); // array of elements
(function loop() {
if (p.length) {
var el = p.shift();
$(el).fadeIn(800).delay(4000).promise().done(loop);
}
})();
}
demo at http://jsfiddle.net/4dNr3/2/
Note that this uses no explicit timers at all, and nor does it use any events to trigger the next phase - it relies on the animation queue for all timing. Note that it's not generally a good idea to mix timers and animation unless you can guarantee that they're interleaved rather than running in parallel. In this case that's OK, though.
I have the following methods in javascript:
Controller.prototype.changeScene = function (curScene, newScene) {
sf.scene.hide(curScene);
sf.scene.show(newScene, curScene);
sf.scene.focus(newScene);
};
And in another JS Class:
Test.prototype.handleHide = function () {
alert("SceneDialog.handleHide()");
$(".screenOverlay").fadeOut("slow");
$(".dialogBox").fadeOut("slow");
};
sf.scene.hide() calls the handleHide method. In handleHide there's some animation, but it's not shown. The Controller doesn't wait for it to be finished.
I tried $.when(sf.scene.hide()).done() without any luck.
Any suggestions?
You can use the jQuery queue to keep a list of animations that are queued to occur only after the previous one has completed.
sf.scene.hide(curScene);
sf.scene.show(newScene, curScene);
sf.scene.focus(newScene);
would become:
sf.scene.hide(curScene);
sf.scene.queue(function() {
$(this).show(newScene, curScene);
$(this).dequeue();
});
sf.scene.queue(function() {
sf.scene.focus(newScene);
$(this).dequeue();
});
You can use the promise() function of jquery to call a callback when ALL animations are over.
Try out:
Test.prototype.handleHide = function (callback) {
$(".screenOverlay,.dialogBox").each(
function(i) {
$( this ).fadeOut("slow");
}
);
$(".screenOverlay,.dialogBox").promise().done(callback);
};
And pass the callback as an argument to handleHide. Your changeScene function should look like this:
Controller.prototype.changeScene = function (curScene, newScene) {
sf.scene.hide(curScene, function() {
sf.scene.show(newScene, curScene);
sf.scene.focus(newScene);
});
};
if you are using jquery animation functions, jquery generally provides a complete parameter which will be called when the function is complete.
using fadeout:
$('#test').fadeOut('slow', function() {
// fadeout is finished!! do something
});
Can someone please tell me why my function is not executing, after my images are displayed?
$("#screen").css("background-image", "url('screens/animated/077.gif')").delay(5000).queue(function() {
$("#screen").css("background-image", "url('screens/animated/078.gif')").delay(5000).queue(function() {
buttonClick(16);
});
});
Don't know why it won't call my buttonClick(16); function.
You could just animate instead dude? animate() you can pass a time to and also it has a callback function, so once the first animation is complete you can run more code, i.e.
$(this).animate(function(){
//Do animation
},1000,function(){
//Animation is complete, do something else like the next animation
$(this).animate(function(){
//Another animation to run once the first is complete
});
});
Because you didn't dequeue.
$("#screen").css("background-image", "url('screens/animated/077.gif')").delay(5000).queue(function () {
$(this).css("background-image", "url('screens/animated/078.gif')").delay(5000).queue(function () {
$(this).dequeue();
buttonClick(16);
}).dequeue();
});
The queue function receives a param that you should call when the next function should run.
Example:
$().queue(function (next) {
// Do what you need
next();
});
I am trying to reset some css but with a delay after the click. For some reason the delay seems to be getting ignored. Any ideas?
$("#closeMe").live("click", function() {
$("#selectContainer").fadeOut( function() {
scrollerPos = 1
$(".scroller").delay(3000).css({"margin-left":"0px"});
$("#selectContainer img").delay(3000).css({"background-color":"#FFF"});
$("#selectContainer img:eq(0)").delay(3000).css({"background-color":"#000"});
});
});
I don't believe css participates in the effect stuff, so it won't be aware of the queue. From the delay docs:
Only subsequent events in a queue are delayed; for example this will not delay the no-arguments forms of .show() or .hide() which do not use the effects queue.
Pretty sure css is on that list too.
No problem, though; you can do this:
$("#closeMe").live("click", function() {
$("#selectContainer").fadeOut( function() {
scrollerPos = 1
setTimeout(function() {
$(".scroller").css({"margin-left":"0px"});
$("#selectContainer img")..css({"background-color":"#FFF"});
$("#selectContainer img:eq(0)").css({"background-color":"#000"});
}, 3000);
});
});
Use setTimeout() instead of .delay()
setTimeout(resetCSS, 3000);
function resetCSS() {
$(".scroller").css({"margin-left":"0px"});
$("#selectContainer img").css({"background-color":"#FFF"});
$("#selectContainer img:eq(0)").css({"background-color":"#000"});
}
Try
setTimeout(function(){
$(".scroller").css({"margin-left":"0px"});
$("#selectContainer img").css({"background-color":"#FFF"});
$("#selectContainer img:eq(0)").css({"background-color":"#000"});
},3000);
quote from .delay()
Only subsequent events in a queue
are delayed;
the .css() method does not use the queue.
You need to use a timeout
$("#closeMe").live("click", function() {
$("#selectContainer").fadeOut( function() {
scrollerPos = 1
setTimeout(function(){
$(".scroller").delay(3000).css({"margin-left":"0px"});
$("#selectContainer img").delay(3000).css({"background-color":"#FFF"});
$("#selectContainer img:eq(0)").delay(3000).css({"background-color":"#000"});
});
});
});
css is not an animated function. It cannot be delay ed.
You can use animate for that:
$(".scroller").delay(3000).animate({"marginLeft":0}, 0);
But it only works with numeric properties, not background-color. For that you can use jQuery UI animate:
The jQuery UI effects core extends the animate function to be able to animate colors as well. It's heavily used by the class transition feature and it's able to color animate the following properties:
backgroundColor
borderBottomColor
borderLeftColor
borderRightColor
borderTopColor
color
outlineColor