JQuery ScrollLeft with easing [duplicate] - javascript

This question already has answers here:
TypeError: p.easing[this.easing] is not a function
(12 answers)
Closed 8 years ago.
I am trying to scrollLeft with an easing applied.
It scrolls just fine if I took out the ease
$("#content").animate({
scrollLeft: '+=' + $(window).width()
}, "slow");
But when I try to add an easing to the animation
$("#content").animate({
scrollLeft: '+=' + $(window).width()
}, "slow", "easeInOutBounce");
I get an error that looks like:
TypeError: m.easing[this.easing] is not a function
Any help would be appreciated

easeInOutBounce is not part of the default set of jQuery easings. You’ll need to include jQuery UI’s easing library to have access to this. Either just include the whole of jQuery UI, or build yourself a custom version of the library containing just the easing components. Include this after including jQuery and before your code.

You have to add 'easeInOutBounce' to jquery easing array, otherwise you only can use 'linear' or 'swing'.
There are plugins to add easing curves to jquery, jquery-ui adds many of them including 'easeInOutBounce'

I think you need the JQuery UI to have access to this kind of easing.
Source (JQuery documentation):
Easing
The remaining parameter of .animate() is a string naming an easing function to use. An easing function specifies the speed at which the animation progresses at different points within the animation. The only easing implementations in the jQuery library are the default, called swing, and one that progresses at a constant pace, called linear. More easing functions are available with the use of plug-ins, most notably the jQuery UI suite.

Related

Bootstrap 4 - what is the speed of collapsing animation?

How fast is the Bootstrap 4 collapse animation? I am unable to find it in the messy bootstrap.js file.
My goal is to scroll down to the bottom of unpacked div with the same speed as the default Bootstrap collapsing. I use a code from here.
$("html, body").animate({scrollTop: $("#myID").scrollTop()}, 1000);
I want to find a precise value instead of 1000 which is too small causing the scrolling is slow.
According to the jQuery documentation on animate():
Durations are given in milliseconds; higher values indicate slower animations, not faster ones. The default duration is 400 milliseconds. The strings 'fast' and 'slow' can be supplied to indicate durations of 200 and 600 milliseconds, respectively.
The value you are looking for should be 400.

How to define easing option in jquery animation?

I need to set easing 'easeInCubic' on an animation done using jQuery.
Here my code:
$('#content-scroll-inner:not(:animated)').animate({ 'top': moveOf}, this.animationSpeed, this.cbEndAnimation.bind(this));
Trying something like
$('#content-scroll-inner:not(:animated)').animate({ 'top': moveOf},'easeInCubic', this.animationSpeed, this.cbEndAnimation.bind(this));
What am I doing wrong and how to fix it?
Use easing option to set easing effect:
easing: 'easeInCubic'
This way:
$('#content-scroll-inner:not(:animated)').animate({ 'top': moveOf},easing:'easeInCubic', this.animationSpeed, this.cbEndAnimation.bind(this));
Use easing
Optional. Specifies the speed of the element in different points of
the animation. Default value is "swing". Possible values: "swing" -
moves slower at the beginning/end, but faster in the middle "linear" -
moves in a constant speed Tip: More easing functions are available in
external plugins.
With animate():
$('#content-scroll-inner:not(:animated)').animate({ 'top': moveOf},easing:'easeInCubic', this.animationSpeed, this.cbEndAnimation.bind(this));
With addClass()
$('.foot').addClass('slide-down', 1000, 'easeInCubic');
use easing: and make sure to add jquery.ui.js in your script tag. Please read this documentation

JQuery synchronous animate not working

I have a jquery synchronous animation with window.setInterval
window.setInterval(function(){
$("#pageflip img").stop().animate({width:'+=2px',height:'+=2px'}, 800,null,function(){
$("#pageflip img").stop().animate({width:'-=2px',height:'-=2px'}, 800);
});
},1600)
What happening here when I loose focus from page window (switch tab or open another application, not viewing animation page) callback function is not called, image width and height always increasing (not back to its normal position) as long as I remain in same page window it is working fine. I am newbie in jquery any help please?
Sorry for my bad english.
.animate( properties [, duration ] [, easing ] [, complete ] ).
You have the easing parameter value set to null, it should be left empty or set to linear (more options when using the easing plugin).
Easing :
The remaining parameter of .animate() is a string naming an easing function to use. An easing function specifies the speed at which the animation progresses at different points within the animation. The only easing implementations in the jQuery library are the default, called swing, and one that progresses at a constant pace, called linear. More easing functions are available with the use of plug-ins, most notably the jQuery UI suite.
Remove the ,null or replace it with Linear/swing, before your callback. By default the easing is set to swing.
Refer to the docs for more details.

rewrite this code to flying with easing not fadein

How to rewrite this code, so it would fly in with easing not just fade in.
Code -
jQuery('#swiftslider-slide-'+newSlide).addClass('active').fadeIn('300');
Could you give me a full example? I understand I must use .animate() but if I do like this -
jQuery('#swiftslider-slide-'+newSlide).addClass('active').animate({opacity: "show"}, { duration: "slow", easing: "easein" });;
it doesn't work.
Hope you will be able to help me.
Thanks, Sparky672.
It's not working because, by default, there's no such thing as easein
in jQuery. Without using your own function or plugin, the only two
default jQuery animation easing options are swing and linear. See this
question to learn more about easing functions.

Easing on Fixed Position Jquery

Is there anyway to add a easing to a fixed element?, I've been looking around and I can't find an answer. I really don't know how it would be, maybe something like...
$(window).scroll(function() {
$("#form").animate({position:"fixed", easing: 'swing'});
});
Any help will be appreciated ^ ^ Thanks!
Edit:Pretty much what I'm looking for is when user scrolls, the fixed element obviously will follow the window position, but I want to add is a little delay in comparison to scroll action with an easing effect
You'd have to make that div absolute positioned, z-indexed and without parent, then move it on the scroll event. You can know the number of pixels scrolled with scrollTop(). Something like this:
$(window).scroll(function(){
var offset=100;
//stop is called so easing doesn't affect while it is still scrolling.
$("form").stop().animate({top:($(window).scrollTop()+offset)+"px"}, 300, 'swing');
});
Try this instead:
$("#form").animate({position:"fixed"}, 300, 'swing');
From the jQuery api ( http://api.jquery.com/animate/ ):
The only easing implementations in the jQuery library are the default,
called swing, and one that progresses at a constant pace, called
linear. More easing functions are available with the use of plug-ins,
most notably the jQuery UI suite.
$("form").animate({position:"fixed"}, 300, 'swing'); //swing being default

Categories

Resources