Search jQuery

jQuery Forum

Easing options not working

in Using jQuery • 8 years ago

I have created a horizontal image slider - it shows 3 images and then after a set period of time the images slide to the left. The first image (that just moved off "screen"is then moved to the bottom of the list of images. So the images continue to loop indefinitely which is what i am wanting.

What is not working for me is the speed at which the animation occurs - it is too fast and I would like the movement of the images to the left to be slower and smoother. I have tried easing options but they seem to have no effect.

Here is the query code and the html it is referring to: - this is saved and linked as scroller.js

$(document).ready(function(){

function rotate() {

$('.slideshow1 img').first().animate({left:'300px'},2000, "easeOutCubic", function() {

$(this).insertAfter($('.slideshow1 img').last()).show();

});

}

setInterval(function() {

rotate();

},3000);

});

</div>

I have linked to libraries as follows:

Replies(18)

jakecigar

Re: Easing options not working

8 years ago

I have tried easing options but they seem to have no effect.

Is it possible your jquery-ui.js is missing?

Easings | jQuery UI API Documentation shows how each one works.

JΛ̊KE

kbwood.au

Re: Easing options not working

8 years ago

The easing function affects the rate of change of the animation within the overall duration. If you want the whole thing to be slower you need to change that duration.

setInterval(function() {
$('.slideshow1 img').first().animate({left: '300px'}, 4000, 'easeOutCubic', function() {
$(this).insertAfter($('.slideshow1 img').last()).show();
});
}, 5000);

a.swanink

Re: Easing options not working

8 years ago

Hi Jake and kbwood

Thanks for your replies:

(i) checked the jquery-ui.js is linked properly. No indication in the Console (in Chrome)when I load the page to indicate that it is not working.

(ii) Tried the suggestion of changing the duration etc.

setInterval(function() {
$('.slideshow1 img').first().animate({left: '300px'}, 4000, 'easeOutCubic', function() {
$(this).insertAfter($('.slideshow1 img').last()).show();
});
}, 5000);

This didn't make any difference to the speed, smoothness etc of the images moving left.

Any other ideas?

jakecigar

Re: Easing options not working

8 years ago

Did you include more than one copy of jQuery?

Do you have all the CSS needed to do this animation?

Can you share a link to your page or create a demo with http://jsfiddle.net ?

JΛ̊KE

a.swanink

Re: Easing options not working

8 years ago

Hi Jake

There are only the libraries that I indicated and since the animation runs OK - only too fast I think the CSS is working fine.

This is the only relevant css for the div

.slideshow1 {

width: 900px;

height:200px;

overflow: hidden;

}

.slideshow1 img {

width: 300px;

height: 200px;

padding-top: 2px;

padding-bottom: 2px;

float: left;

}

Unfortunately the page is not on a webserver and when I looked at the jsfiiddle site I can't see how to use all of these libraries

Not sure if that is of any help ...?

jakecigar

Re: Easing options not working

8 years ago

Nope, that doesn’t help.

You said that easing options don’t work. But you also said animation runs OK.

easeOutCubic is very fast and then it slows down. Is that what you mean by " too fast"? Or do you mean the number 2000 is too small and you need 4000 or 8000?

JΛ̊KE

a.swanink

Re: Re: Easing options not working

8 years ago

Hi Jake

I will try to get the pages uploaded to a web server that you can access and then you might be able to see better what I am referring to.

watusiware

Re: Easing options not working

8 years ago

Do you understand what easing is? It only affects the acceleration and deceleration of the effect. It does not change the overall speed.

http://matthewlein.com/experiments/easing.html

it is too fast and I would like the movement of the images to the left to be slower and smoother.

That has nothing to do with easing. If you want to slower, you need to increase the value 2000. If you want it smoother - well, you might have to use a different kind of animation. CSS animation will in most cases give smoother results than jQuery's old, creaky Javascript animation code that, really, nobody should be using. (IMO)

Either use CSS animation, or, if you need the greater capabilities that pure JS animation can bring, drop-in one of the many replacement animation libraries that will do a much better job than jQuery's built-in animation functions.

I sense that a lot of developers use jQuery animation "because it is there". Well, the reason it is there is that, years ago, there was no CSS animation yet.

For simple UI effects, CSS animation is the best way to go today.

If you need serious animation for a game, etc. use something better than jQuery. There are several popular high-performance Javascript animation libraries. Most have a drop-in retrofit/replacement plugin for use with Query.

This didn't make any difference to the speed, smoothness etc of the images moving left.

That's impossible. Or you are not showing us the actual code.

Instead of posting little bits of code in the forum, create a demo page that we can try or create a jsFiddle. That way, we can see the missing parts and see what is really happening, rather than what you think is happening.

a.swanink

Re: Re: Easing options not working

8 years ago

Hi watuiware - thanks for taking the time to reply. However your answer isn't useful - (i) yes - I know what easing is (ii) why would I ask a question about using jquery in a jquery forum when if I wanted to use CSS based animation? (iii) Not very helpful to tell me that what I am seeing is impossible ......

watusiware

Re: Easing options not working

8 years ago

If you post a link to your site or set-up a jsFiddle, perhaps we can help.

Posting little bits an pieces in the forum isn't that useful. Give us something we can try ourselves.

Otherwise, all we can do is guess what you might have done that you haven't shown us.

If you change 2000 to 4000, it should slow the animation speed to 1/2. If it does not, you have a bug. If you show us a *complete* and workable example, we can probably find the bug.

Your response indicated that you do not understand what easing is. NOTHING you can do with easing will change the overall speed of an animation. A 2 second animation takes 2 seconds, regardless of easing. If you use some particularly bizarre easing curve, it might seem so, or might seem there is some delay. The total animation time does not change.

watusiware

Re: Easing options not working

8 years ago

why would I ask a question about using jquery in a jquery forum when if I wanted to use CSS based animation?

It's a common misperception that jQuery animation functions are "the way to do animation" in jQuery. I suppose it's partly because people read old documentation, and partly because some developers seem to think that jQuery ought to do everything for them, and if it's not part of jQuery, they don't want to hear about it.

IMO, jQuery animation is over-used because of old documentation, inertia, and lack of knowledge. For most UI animations, CSS animation is a better approach. It's one weakness of the otherwise-excellent jQuery documentation - it documents what jQuery has to offer, but doesn't necessarily point-out when some other approach might be better. And what jQuery has to offer is often based on supporting old browsers that have mostly been long forgotten. jQuery has been around for quite some time now, and solves some problems that no longer need a jQuery solution.

a.swanink

Re: Easing options not working

8 years ago

Would having access to a zipped version of the website on DropBox be a reasonable way of getting the files you need to you?

jakecigar

Re: Easing options not working

8 years ago

If it’s HTML/CSS/javaScript only that would work. You can add a zip file here too.

JΛ̊KE

a.swanink

Re: Re: Easing options not working

8 years ago

Hi Jake

The compressed size is 4MB and that's about as small as I can make it. I can add it to DropBox instead and share it with you but would need an e-mail address.

jakecigar

Re: Re: Easing options not working

8 years ago

You can drop off a zip in my chat program. Socket Chat™ Mobile

JΛ̊KE

watusiware

Re: Easing options not working

8 years ago

Providing a jsFiddle would be a reasonable way of getting the files to everybody who might be able to help. Unzipping files from an unknown source is not a popular option here. It can be unsafe, it takes extra time and effort, and there are better tools available for sharing Javascript problems and solutions. Use them.

If you expect somebody to open a .zip, install it on their server, and then try to figure out what parts are relevant - you should hire a consultant. If you want help here, make it easy for others to help you.

A link to a document on your site or some test site is also a good choice, but not as good as creating a jsFiddle. Sometimes this is the only way to demonstrate the problem, though, if it needs some server code in order to work.

Boil it down to what is needed to demonstrate the problem. My experience is that most of the time, you will discover the problem in the process.

jakecigar

Re: Easing options not working

8 years ago

It was good chatting with you. I came up with

<style>
.wrap{width:900px;overflow:hidden; position: relative;}
.slideshow1{ width:3500px; position: relative;}
</style>
<div class="wrap">
<div class="slideshow1">
<img class="show" src="images/slideshow images/10-attractive-container-gardening-ideas-fine-gardening-min.jpg">
<img class="show" src="images/slideshow images/barrow-and-gumboots-min.jpg">
<img class="show" src="images/slideshow images/container-garden-wheelbarrow-flowers-min.jpg">
<img class="show" src="images/slideshow images/flowers-and-fork-min.jpg">
<img class="show" src="images/slideshow images/gardening_campers-min.jpg">
<img class="show" src="images/slideshow images/grandma-and-child-min.jpg">
<img class="show" src="images/slideshow images/tulips-min.jpg">
</div>
</div>

and

$(document).ready(function() {
var slideshow = $('.slideshow1')
setInterval(function() {
slideshow.animate({
left: -300
}, 5000, "easeOutCubic", function() {
slideshow.css({
left: 0
}).children().first().appendTo(slideshow)
});
}, 6000);
});

JΛ̊KE

a.swanink

Re: Re: Easing options not working

8 years ago

Thanks Jake - this works a treat. Appreciate the time taken.

Top Reply

Response title

Attachments

jQuery Forum

Easing options not working

Replies(18)

Re: Easing options not working

Re: Easing options not working

Re: Easing options not working

Re: Easing options not working

Re: Easing options not working

Re: Easing options not working

Re: Re: Easing options not working

Re: Easing options not working

Re: Re: Easing options not working

Re: Easing options not working

Re: Easing options not working

Re: Easing options not working

Re: Easing options not working

Re: Re: Easing options not working

Re: Re: Easing options not working

Re: Easing options not working

Re: Easing options not working

Re: Re: Easing options not working

Statistics

Tags

Actions

Related Posts