Plain JS: SLIDE element

JavaScript
1

is there a slide function in plain Javascript?

I have to slide an element from one point to another… and it has to slide in exactly 0.24 secs. from one pt to another… ;-o )

but I’ll be happy if I just get it to slide for now…:wink:

thank you…

2

Hi Maya,

There isn’t a slide() function in Pain JavaScript, although obviously you can program your own.
Is there any reason you don’t want to use jQuery for this?
Animation is one area where jQuery excels and makes a developper’s life much easier.
You can also build a custom version of jQuery and just pull in the animation functionality if it is size you are worried about.

3

hi Pullo,

it’s for a test… they insist on plain JS… (sigh…)

but well, there was a time constraint, I had to hand in already… but that’s ok… if I can I want to figure out if I can do it over the weekend, and maybe just send it to the guy again anyway…

and of course you’re right, I’m sure in real life no one in their right mind would do stuff like this with with JS…

the JS issue is slowly getting frustrating for job-seekers… a few years ago we all had to learn at least jQuery, and some other libraries (I only know jQuery…) they were all the rage, and you had to know them…

now they’re going back to, oh but well, you do need to know how to do all this complicated with plain JS too, of course… it’s getting ridiculous… and some job descriptions contain a mind-boggling amount of JS libraries, some weird ones I’ve never even heard of… (and they do know they will never find someone who knows all of them…)

in my particular experience, every single place where I have worked in the last 4 years or so, they have used nothing but jQuery, absolutely nothing else…

thank you for your response… have a good weekend…

4

Hi,

I’m off to bed now, so sorry for the short reply.
I found this: http://stackoverflow.com/questions/3795481/javascript-slidedown-without-jquery
Maybe it it’ll help.

Let us know how you get on.

5

on the contrary, Pullo… thank you for your response… I will look @ url you posted…

gute Nacht… schlaf gut…:slight_smile:

6

actually in case you’re curious, here are the JS instructions:

a) When I click on the “Swap Vertical” button, the two buttons swap vertical positions in 0.24 seconds. (i.e., the bottom button moves up and the top button moves down, but both buttons retain their horizontal position.)

b) When I click on the “Swap Horizontal” button, the two buttons swap horizontal positions in 0.24 seconds.

c) The button animations should accelerate at the beginning, and should not decelerate at the end.

“accelerate”??? man, I had never even heard of “accelerating” elements with JS…;-o
(accelerate “at the beginning”… only at the beginning… and yeah, I’ll make sure I don’t “decelerate” at the end…:wink: man, anyone would think they write computer games or something, but they don’t, they just do corporate websites…:wink:

thanks again…

7

Of course they would - they’d usually have a library of functions for providing all the common parts of the processing though for example a collection of JavaScript functions such as JQuery.

JQuery is not a separate language, it is just a few functions written in JavaScript that can make writing compex JavaScript easier. It is actually way overkill for a simple process such as slide() as you would only be using a small fraction of the library code.

I have a series of tutorials on making elements move about the page that starts at http://javascriptexample.net/anim11.php - it makes use of a much smaller set of common functions that just provide the functionality needed for this type of script.

8

thank you very much, felgal…

yes I know jQuery is not a separate language… I know exactly what it is…:wink: and when I try to do hard stuff in plain JS I realize how much goes on “behind the scenes” in jQuery (& other libraries too, I suppose…)

thank you very much for the url you posted… I can’t now, but I will it check it tomorrow for sure…

thank you… have a good day…

9

[ot]

Is it really that bad? :lol: [/ot]

10

If you’ve used to jQuery, you would have heard of accelerating and decelerating As the term “easing”.

There’s a good suite of easing demos over at http://jqueryui.com/effect/#easing

11

hi Paul…:slight_smile:

yes of course I have used “easing” in jQuery (mosly in conjunction with cycle plugin (there’s an “easing” plugin with all sorts of transition effects…)

thank you!!

12

[ot]

Sure is! I would use jQuery to brush my teeth if I could. Everything else is just pain and agony. :)[/ot]

Back on topic: how did you get on, Maya?

@felgall ; your demo didn’t work for me in the latest Chrome.
The text just sits there, when I’m guessing it should move.

13

There are a series of tutorials there that show step by step how to build an animation script. The element in the first tutorial doesn’t move - that tutorial is just showing how to build an independent element that can be made to move.

14

Oh ok. Sorry!

I just looked at the source, saw this:

(function() {
  var anim = new $O('myobj');
  anim.moveto('200px','300px');
  anim.setVisibility('visible');
})();

and thought I had missed something.