Using jquery.effects.slide, how to combine direction, speed, and completed function? - javascript

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.

Related

Animation not being made jquery (backgroundColor)

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

Velocity.js - Buggy looping animation?

I have been testing a theory design for an animated mouse to indicate that the user of a website can scroll downwards. It's not complicated, and I've come up with a design which should be re-usable...
However for some reason if I try to clone the element and append it, it no longer get animated visually? However if I $.click() with jQuery, it fixes after one iteration.
Perhaps this is just a browser render issue? Please let me know if you cannot replicate the problem! Cheers
jsfiddle: https://jsfiddle.net/xw39e0bs/4/
Turns out that velocity calculates the start point based on current CSS values. So if you clone a moving element mid-motion, that will become the new start point. Therefore, one way to fix this is to provide forcefeeding.
Working example:
function mouse(){
$(".mouse .ball").velocity({
top: ["45%","25%"] //[TARGET_VAL,START_VAL]
},{
duration: 800,
easing: "swing",
}).velocity("reverse",{
delay: 2000,
complete: function(){
mouse();
}
});
}
mouse();
$("#clone").click(function(){
$(".mouse").last().clone().appendTo("#mice");
});
https://jsfiddle.net/xw39e0bs/5/
In this version we're reassigning the selector to bring in the cloned items. All of the clones then animate as expected.
complete: function(){
sel = $(".mouse .ball");
mouse();
}

Javascript - how to animate scrollIntoView

I was only able to get a div on click into view with the scrollIntoView function, and it works as it should, just the way I want it, but I wonder is there a way to somehow animate it, and make it a bit slower?
I have tried with a suggestion from here:
function scroll(element, parent){
$(parent)[0].scrollIntoView(false);
$(parent).animate({
scrollTop: $(parent).scrollTop() + $(element).offset().top - $(parent).offset().top,
duration: 500,
easing: 'swing'
});
}
But it pushes the element to far up, it is not pushing it as it is on just:
$('#drawer')[0].scrollIntoView(false);
scroll = function(element, parent, time) {
$(parent).animate({
scrollTop: $(element)[0].offsetTop - $(parent)[0].offsetTop,
}, time, "swing");
}
You might want to add scrollIntoView, i don't know what that is for.
This works in jQuery 3.1.1 .
Check this out: http://demos.flesler.com/jquery/scrollTo/
Lots of options, I've used it several times with good results.

jQuery hover animation queue

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');
});

Duration of jQuery events not equal

I have two lines of code firing on the click of a div. They do what I want them to, but it seems that the timing of them is out of sync. These are the two lines.
$('#tourPage').show("slide", { direction: "right" }, 500);
$('#navigationRight').animate({marginLeft: '-1240px'}, 500);
I have the duration of both of them set to 500, but they don't move together. There seems to be some sort of separation or something between them. I haven't had this trouble before. I used this and it works just fine.
$('#aboutPage').animate({width: 'hide'}, 500);
$("#navigationLeft").animate({marginLeft: '0px'}, 500);
Those two elements do move together when clicked.
Any ideas why time is different in the first case?
Thanks

Categories