This is my code:
$('.content').delay(1000).animate({left: '10'}, {duration:1000, queue:false});
$('.content').delay(1000).animate({opacity: 0}, {duration:1000, queue:false});
Content div is supposed to move left 10px and fade out simultaneously, and it does just fine. Doesn't do the 1000 delay though. Does the queue:false negate the delay?
If you specify for an animation to not queue, the delay will be ignored because the delay is a callback added to the queue that the animation is ignoring.
Update:
$('.content').delay(1000).animate({left: 10,opacity: 0}, {duration:1000});
Related
Having some trouble fully understanding how animations in jQuery are queued and initialized. Trying to get more comfortable with the concept by writing some button effects.
I want to turn the code from the pen below into a smooth animation (as you can see if you hover over the button multiple times you run into some issues) that executes each animation on hover in ONLY when there is not another animation going on, and then execute hover out animations ONLY when the hover in animation finishes.
Here is my code: http://jsbin.com/larukayi/1/edit
Thanks in advance for any help!
I think below changes give you the expected result:
button1.css("cursor", "pointer").hover(
function(){
slideup.stop(true).animate({
"bottom":"0px"
}, 150, 'linear');
slideup.delay(100).animate({
"left":"50px"
},150,'linear');
slideright.delay(550).animate({
"left":"0px"
}, 100, 'swing');
},
function(){
slideright.stop(true).animate({
"left":"-50px"
},150,'linear');
slideup.delay(100).animate({
"left":"0px"
}, 150, 'linear');
slideup.delay(100).animate({
"bottom":"-100px"
},150,'linear');
});
I found jquery.effects.slide works according to what I need. But I am having trouble figuring out how to combine all possible arguments with a completed function.
For example, this basically does what I want, slide a div from left to right:
$("#companyinfo").show('slide', function(){
//do stuff here as a condition of the completed slide effect.
});
But when I introduce a speed of 500, it doesn't seem to recognize the additional argument:
$("#companyinfo").show('slide', 500, function(){});
And what if I want to change the direction?
$("#companyinfo").show('right', 'slide', 500, function(){});
The additional argument "right" breaks the slide effect.
So, I need to use show with: direction, speed, and completed function.
$("#companyinfo").show("slide", {direction: 'right'}, 500, function() {
//callbacks
});
Vanilla jQuery doesn't have slide effects, but jQuery UI does.
Wondering if it's possible to make a jQuery animate property slower than another - here's what I have right now:
$(".thebox").animate({
height: "toggle",
opacity: "toggle"
},250);
When .thebox fades in and slides down simultaneously, I'd like to make opacity part of the animation slower, while making the height part faster.
The whole thing has to work with a button that on click causes the animation. It must be a toggle switch.
Thanks to anyone able to answer this!
Stack the animations on top of each other, and disable the default animation queueing.
$(".thebox")
.animate({height: "toggle"}, {duration: 250, queue:false})
.animate({opacity: "toggle"}, {duration: 500, queue:false}); // Runs twice as slow.
EDIT:
Since the events are triggered twice using toggle, we need a different approach, to detect wheter to hide or show the box. One simple solution would be a helper-class as such:
var theBox = $('.thebox');
if (theBox.hasClass('active')) {
// It is active, then fade it out
thebox
.removeClass('active')
.animate({height: 0}, {duration: 250, queue:false})
.animate({opacity: 0}, {duration: 500, queue:false});
} else {
// It is not active, show it
thebox
.addClass('active')
.animate({height: 'auto'}, {duration: 250, queue:false})
.animate({opacity: 1}, {duration: 500, queue:false});
}
Worth pointing out: The animations can be done using slideUp, slideDown, fadeIn and fadeOut instead of animate(). Also note the above assumes that there is only one element with the class theBox.
I am trying to make a div move from the bottom of the screen to the top, starting with opacity 0, having opacity 1 in the middle and fading again to 0 at the top.
Everything has to start with 3s delay.
$("#circle")
.css({'display':'block'})
.css({'opacity': '0'})
.css({'top':$(window).height()})
.delay(3000)
.animate({'opacity':1},{duration:1000},"linear")
.animate({'top':$(window).height()/2},{duration:1000, queue:false},"linear")
.animate({'opacity':0},{duration:1000},"linear")
.animate({'top':0},{duration:1000, queue:false},"linear")
I also tried with 'queue:false' but it still does not run properly, and this is also not linear.
Any ideas?
You should make better use of the object notation, such as :
$("#circle")
.css({
'display':'block',
'opacity': '0',
'top':$(window).height()
}
)
.delay(3000)
.animate({
'opacity':1 ,
'top':$(window).height()/2
},
{duration:1000},"linear")
.delay(1000)
.animate({
'opacity':0,
'top':0
},
{duration:1000},"linear");
You could try this or try to set delays between multiple lines using the $(this) selector.
Best of luck, it always help to have a jsfiddle link.
I've been struggling with this issue for awhile and have decided to ditch the setTimeout approach since I just read creating too many timers is bad. Below is the function to animate a group of objects - which is called on hover. It's currently setup so that all animation settings are passed in from the user and apply to the correct object, then each object is animated on a per-property basis - allowing for control of speed in/out and easing for each property.
The only thing I'm working on now is the delays. I can't use .delay since it isn't queued and I can't use setTimeout (at least in the approach I've taken). Any ideas?
function animate_in(e){
$(this).find('.captionator_background').each(function(index){
// LOOP THROUGH OBJECTS
current_obj = $(this); current_obj.stop().clearQueue();
// 1. LEFT ANIMATION
current_obj.animate({'left':ends_x_set[index]},{duration:parseInt(bg_x_speed_in_set[index], 10), queue:false, specialEasing: {'left':bg_x_ease_in_set[index]}});
// 2. TOP ANIMATION
current_obj.animate({'top':ends_y_set[index]},{duration:parseInt(bg_y_speed_in_set[index], 10), queue:false, specialEasing: {'top': bg_y_ease_in_set[index]}});
// 3. OPACITY ANIMATION
current_obj.animate({'opacity':parseInt(end_opacity_set[index], 10)},{duration:parseInt(opacity_speed_in_set[index], 10), queue:false, specialEasing: {'opacity':opacity_ease_in_set[index]}});
// 4. BACKGROUND COLOR ANIMATION
current_obj.animate({'backgroundColor':bg_color_in_set[index]},{duration:parseInt(bg_color_speed_in_set[index], 10), queue:false, specialEasing: {'backgroundColor':bg_color_ease_in_set[index]}});
}); // END EACH LOOP
}; // END ANIMATE IN FUNCTION
Thanks!