Is it possible to have easing with this:
('#sideBar').hide('slide', {direction: 'right' },
800, function(){...});
At the moment it is very jittery as it is moving maybe.. 100 - 500 pixels (depending on content). I have been looking google and most people say to use easing, but when looking at the documentation i cannot see a property for easing.
You can specify the easing property in the options object (the second argument):
$('#sideBar').hide('slide', { direction: 'right', easing: 'easeOutBounce' },
800, function(){...});
Check out the easing documentation
Here's an example
First correct with
jQUery('#sideBar').hide('slide', {direction: 'right' },
800, function(){...});
http://docs.jquery.com/UI/Effects/Slide
Look on below page
http://docs.jquery.com/UI/Effects/Slide
OR
you can use animate
http://api.jquery.com/animate/
Also you can find easing cheat
For example.
http://gsgd.co.uk/sandbox/jquery/easing/
http://jqueryui.com/resources/demos/effect/easing.html
http://easings.net/
You can download the JQuery easing plugin from http://gsgd.co.uk/sandbox/jquery/easing, which provides smoother animations than the default ones included with jQuery. You can then easily set your global easing animation using the following code:
jQuery.easing.def = "easeInOutExpo";
You can of course choose whichever easing animation you prefer. This will affect all of your jQuery animations on the page, which isn't a bad thing if you're looking for consistency.
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 a function that animates the addition of margin to a div-box, but for some reason easeOut animation style is not working for me. Linear animation style works fine tho.
Here is the function:
$("#bokse1").click(function() {
$("#nav").animate({
marginLeft: ["+=100px", "linear"],
}, 400, function() {});
});
Here is a fiddle: http://jsfiddle.net/hto5qLmb/1/
I wanted to make it like this:
marginLeft: ["+=100px", "easeOut"],
but it is not working.
It seems like jQuery really does not want to play nice with easing out with that type of animation selector, if you still want to have the ease out effect, use:
$("#bokse1").click(function() {
$("#nav").animate({ "margin-left": "+=50px" }, "easeOut" );
});
Additionally, have a look at your developer tools, and you can see the myriad of erros that fire when you attempt to use the easing in the way you did initially. Strange indeed
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.
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 trying to make an image slidein on page load but it doesn't seem to work at all. The delay has no problem but the sliding effect doesn't do anything. Any help would be greatly appreciated.
$(function() {
$(".bgslide").one('load', function () {
$(this).delay(1000).show("slide", { direction: "left" }, 'linear', 2000);
}).each(function() {
if(this.complete) jQuery(this).load();
});
});
Here is a link to a jsfiddle as well: http://jsfiddle.net/cDYvh/
The slide effect comes with jQuery UI which you didn't include: http://jsfiddle.net/cDYvh/1/
You could also use $.animate() to avoid including jQuery UI. For example, you could accomplish your example with something like this:
$(this).animate({ left: 2000px });
Note: You'll probably need to apply position:absolute to the elements. Other items can be animated as well, including color, opacity, etc.
Animate Example