Hi I'm trying to do a simple chain animation in jQuery, with a pause (setTimeout) between each frame.
Say each div animates in with a duration of 3500. I would like to control the duration between each opacity fade in animation. Say between the first div and 2nd div the duration is 5 secs, and maybe 10 secs between the 2nd and 3rd frame.
How would you go about this?
http://codepen.io/leongaban/pen/Feroh
Current code
$('#blue').animate({
opacity: '1'
}, 3500, function(){
// Need 5 sec pause here
$('#blue').fadeOut('fast');
$('#orange').animate({
opacity: '1'
}, 3500, function(){
// Need a 10 sec pause here
$('#orange').fadeOut('fast');
$('#green').animate({
opacity: '1' }, 3500);
});
});
That's what delay() and queue() is for:
$('#blue').animate({opacity: '1'}, 3500).delay(5000).queue(function() {
$(this).fadeOut('fast');
$('#orange').animate({opacity: '1'}, 3500).delay(10000).queue(function() {
$(this).fadeOut('fast');
$('#green').animate({opacity: '1'}, 3500);
});
});
FIDDLE
This is exactly what .delay() is for (http://api.jquery.com/delay/). It allows you to write elegant chains of animations for individual elements like this:
$( "#foo" ).slideUp( 300 ).delay( 800 ).fadeIn( 400 );
Note that you will still need to use callbacks to start animations for other objects, though.
In your case, this should be it (untested):
$('#blue')
.animate({ opacity: '1' }, 3500)
.delay(5000)
.fadeOut('fast',
function() {
$('#orange')
.animate({ opacity: '1' }, 3500)
.delay()
.fadeOut('fast',
function() {
$('#green')
.animate({ opacity: '1' }, 3500);
});
});
You can use jQuery fadeOut/fadeIn methods with callbacks.
See here for more information.
But essentially is;
$(".myClass").fadeOut(1000, function() {
//fadeOut complete
});
The first argument is length of time (in ms) until it completely fades out. After that duration has passed the callback fires. So you can safely assume that when the callback fires that your required waiting time has completed.
It's the same syntax for fadeIn also, but I suggest reading the link I provided. It'll explain it it greater detail.
Related
I'm foolin around with the jquery hover functionality. the current code snippet looks like this:
$leftColumn.children().first().hover(
function(event) {
var $this = jQuery(this);
$this.css({
'background-color': '#505050'
}).parent().stop()
.animate(
{
'z-index': '999',
width: '220px'
},
{
duration: '1000'
}
);
},
function(event) {
var $this = jQuery(this);
$this.parent().stop()
.animate(
{
width: '38px',
'z-index': '1'
},
{
duration: '1500',
complete: function() {
$this.css({
'background-color': 'transparent'
});
}
}
);
}
);
What this basically does is increasing the width of a div (which is position absolute) to overlay another div.
I choosed to use jQuerys animate() functionality instead of CSS3s transition because I want to trigger a callback whenever the closing (decreasing the width again) animation is done.
My problem now is, that I want to delay the closing animation for 2 seconds (and yes I know about the delay() vs setTimeout() discussion) which worked fine with setTimeout(). However as the animation is timed out for the given duration it will run, even if I enter the hoverable area again. This of course makes sense as the stop() only triggeres while an animation is on the go, which is not the case if it is timed out.
How can I make this thing work (stop the closing animation when reentering the hoverable area) and still keep a timeout / delay before decreasing the width on "hover leave"?
I have the following animation setup in JQuery, I want the opacity to slowly climb to 100% in 4 seconds and there after fall back to 0% quickly. The result i see is the opposite, fast opacity up, and slow fade. What Is my mistake?
$(motorProtectionElementWarning).animate({
opacity:1,
duration: 4000
},{
complete: function(){ $(motorProtectionElementWarning).animate({opacity:0},1000);}
},5000);
Give it a shot with this syntax :
$(motorProtectionElementWarning).animate({
opacity:1,
}, 4000, function(){
$(motorProtectionElementWarning).animate({opacity:0},1000);
});
I edit your code and its worked.
$(".test").animate({
opacity:0,
duration: 10000
},{
complete: function(){
$(".test").animate({opacity:1},5000);}
},5000);
test it : http://jsfiddle.net/mehmetakifalp/m75YU/
Hi I'm having a div which width is increased with jquery. I want when that width reaches 100% to do something
$(function() {
$('.play').click(function() {
$('.loader').animate({
width: "100%"
},1500);
$('.video img').attr('src','css/images/movie-click.jpg')
$(this).hide();
if($('.loader').width()==$('.video img').width()) {
$('.video img').attr('src','css/images/movie.jpg')
}
});
Something is not right in the if statement. if someone can help me. My idea is to check if the with is 100%, and if it is, everything to be back to normal.(play to be showen, width=0%, img attr different.)
Use the complete callback in animate to execute code once the animation is finished:
$('.play').click(function () {
$('.loader').animate({
width: "100%"
}, 1500, function() {
// any code here will run only after the animation is complete
$('.video img').attr('src', 'css/images/movie.jpg');
});
// any code here will run as soon as the animation starts,
// before it's completed
});
The code in the click function is only called once, so your if statement is not being ran continuously as it animates. Instead, simply add that logic to a callback after the .animate() is complete:
$('.loader').animate({
width: "100%"
},1500,swing, function() {
$('.video img').attr('src','css/images/movie.jpg');
});
Something is not right in the if statement
Indeed :-) Your current code just compares the css values returned by the two .width() calls - which will be false of course.
That's not how you wait for an animation. The animation code is asynchronous, your animate() call just starts the animation but returns immediately (and goes on hiding the button and evaluating the condition).
Instead, pass a callback function to animate, it will be executed when the animation has completed:
$(function() {
$('.play').click(function() {
$(this).hide();
var $img = $('.video img');
$img.attr('src','css/images/movie-click.jpg');
$('.loader').animate({
width: "100%"
}, 1500, function() {
// executed after the animation
$img.attr('src','css/images/movie.jpg');
});
});
});
Can anybody tell me why the Effect is running so often is hovered. I mean you hover 3 times without to wait that the Effect is finished and than you can wait until the Effect has run 3 times.
$(function() {
$('#dropdown_nav li').find('.sub_nav').hide();
$('#dropdown_nav li').hover(function() {
$(this).find('.sub_nav').slideDown(300);
}, function() {
$(this).find('.sub_nav').delay(2000).slideUp(300);
});
});
Here can it be tested: http://jsfiddle.net/QTGvJ/
Using .stop() will clear the animation queues
LIVE DEMO
$('#dropdown_nav li').on('mouseenter mouseleave',function() {
$('.sub_nav', this).stop().slideToggle();
});
With delay for the mouseleave:
$('#dropdown_nav li').on('mouseenter mouseleave',function( e ) {
var delayTime = e.type=='mouseleave' ? 1000 : 0;
$('.sub_nav', this).stop().delay( delayTime ).slideToggle();
});
LIVE DEMO 2 WITH DELAY
Find out more: http://api.jquery.com/stop/
$('.file a').live('mouseenter', function() {
$('#download').stop(true, true).fadeIn('fast');
}).live('mouseleave', function() {
$('#download').stop(true, true).fadeOut('fast');
});
I want the mouseenter function to have a stop() and a delay of 1 second.
So, if I hover over #download the fadeIn should start after a 1 second delay. If I mouse out meanwhile the fadeIn shouldn't start. Get me?
I don't really know how to do that, any ideas?
You need to use setTimeout() in this case because of how .delay() works (and your inability to cancel it).
$('.file a').live('mouseenter', function() {
$.data(this, 'timer', setTimeout(function() {
$('#download').stop(true, true).fadeIn('fast');
}, 1000));
}).live('mouseleave', function() {
clearTimeout($.data(this, 'timer'));
$('#download').stop(true, true).fadeOut('fast');
});
You can give it a try here.
If you use .delay() it'll dequeue the next animation for the element, regardless of if you cleared that queue earlier. So you need a timeout that you can cancel, which the above does by manually calling setTimeout() and storing the result with $.data() so you can clear it later, via clearTimeout().
I was looking for the answer to a similar question, and I found that .animate() could also be used to handle this, and it obeys .stop()
It would look something like this:
$('.file a').live('mouseenter', function() {
$('#download')
.stop(true, true)
.animate({opacity:0}, 1000); // one second delay
.animate({opacity:1}, 'fast', 'swing');
}).live('mouseleave', function() {
$('#download')
.stop(true, true)
.animate({opacity:0}, 'slow', 'swing');
});
Use a setTimeout function
$('.file a').live('mouseenter', function() {
setTimeout(function(){
$('#download').stop(true, true).fadeIn('fast');
}, 1000);
}).live('mouseleave', function() {
$('#download').stop(true, true).fadeOut('fast');
});
setTimeout will execute the code inside the function after the specified miliseconds (in this case 1000).
you can use this on jquery without using delay event .
$('.file a').hover(function() {
time = setTimeout(function() {
$('#download').fadeIn();
},1000);
},function(){
clearTimeout(time);
});
1000 is your time that after it $('#download') will fade in .