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');
});
Related
I'm having a problem where I'm making a function in JavaScript (JQuery):
$('.login').click( function() {
$('#login-container').animate({
left: 0
}, 300, "swing", function(){
$('#login-container').animate({
backgroundColor: 'rgba(0,0,0,0.4)'
}, 2000, "swing");
});
});
Whereas "login" is a button and login-container is a big div which contains a form which people can use to login.
I'm trying to make the giant container that slides over the page only turn its background color to lower the website's exposure but it's working and as far as I know, the code is correct.
The first animation happens but the second one (referring to the backgroundColor) doesn't even start at all.
Thanks in advance
EDIT:
I've simplified my code to see if it was a problem of my syntax or JS simply not applying this animation:
$('.login').click( function() {
$('#login-container').animate({
backgroundColor: 'rgba(0,0,0,0.4)'
}, 2000, "swing");
});
And the element does not have its background-color applied, for some reason.
I don't actually get what you're trying to say here, but if you want to toggle that animation you can use $.toggle() of jquery after the user clicks.
If you want to animate this stuff, look at this documentation provided by jQuery
jQuery Animation
I have four images on a page and when I hover over the image, I want a horizontal div to move up on the bar, and when the mouse pointer moves off of the image, I want it to slide back down. Now when I do this is works fine, however there seems to be a delay. Also, if I move back and forth repeatedly, the delay is more and the slider ends up going up and down on its own for a few seconds. Here is the code, please help!
$('.indexgall').on('mouseenter',function()
{
$(this).addClass('hoverimg');
$(this).children().animate(
{
top: 150
}, 600, function()
{
});
});
$('li').on('mouseleave',function()
{
$(this).removeClass('hoverimg');
$(this).children().animate(
{
top:250,
}, 600, function()
{
});
});
From your code, it doesn't look there should be a delay. Can you post a JSFiddle to show this problem in action?
To address the latter concern, you want to be using the JQuery stop() method to stop the animation by cleaning the animation queue.
This can be done, like so:
$(this).stop().animate({
width: 240
}, 500);
Check out this JSFiddle.
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.
I'm fairly certain I'm being massively stupid here, but how can I run multiple jQuery animation instructions one after the other. The code below causes my box to move away from the left hand side correctly, but does not cause it to expand down.
click : function(){
$(this).not(".break").animate({left: '100%'}, 300);
$(this).slideDown(300);
},
You can split them into two:
$(this).not(".break").animate({left: '100%'}, 300);
$(this).children().slideDown(300).hide();
I have a little jQuery animation which fades in a link when hovering an :
$(function() {
$('.delete').hide();
$('#photos img').hover(function() {
$(this).parents('li').children('.delete').fadeIn('fast');
}, function() {
$(this).parents('li').children('.delete').fadeOut('fast');
});
});
But if I quickly move my mouse in and out of the image, the new animation is always added to the queue and when I stop I can see the link pulsating for a while. I tried using .stop(true), but then sometimes the fade in effect doesn't work at all (or just up to some opacity value less than 1). What can I do?
Thanks, Eric
The best way is to use hoverIntent plugin. This deals with the issues above. It also adds a slight delay to the animation so if a user happens to quickly move the mouse over all the links you do not get an ugly animation flow of all the links.
One way to prevent such problems occuring is to use stop() in conjunction with fadeTo(), as in the snippet below:
$(function() {
$('.delete').fadeTo(0, 0);
$('#photos img').hover(function() {
$(this).parents('li').children('.delete').stop().fadeTo('fast', 1);
}, function() {
$(this).parents('li').children('.delete').stop().fadeTo('fast', 0);
});
});
Hope this solves your issue!