Search code examples
javascriptprototypejs

new Effect.toggle(argument) in javascript?


At the moment im working on a projects which contains prototype.js + scriptaculous.js and some other things..Im trying to remove these libs. So everything should be done with javascript. But i faced 1 thing which is not clear for me (i was not able to find good explanation or solution). Maybe someone will be generous enough to help me a little bit. I have a function where 4 arguments will be passed on click:

function someEffect(element, argTwo, argFive, argSix) {

  //code which is done already
  //code which is done already

  new Effect.toggle(element);
}

So the only thing that i need is to replace last line with a pure js.


Solution

  • In Scriptaculous, Effect.toggle (by default) fades in or out an existing element. There are other transition effects that can be specified in a second argument, but by default, the object fades in or out over 3 seconds. The exact implementation of these effects is documented here: Effect.fade Effect.appear

    The toggle bases its decision on which effect to fire on the display property of the element. If it is currently display: none, then the appear effect is played on it. If not, then the fade effect is. The end-state of Effect.fade is to set display to none.

    I give you all that background in case there are other parts of this page that still need to interact with the replacement effect you are building. If they do, then you'll need to exactly replace those parts of the effect. If not, you can probably do all of this with CSS, and reduce the overhead of your script to adding or removing a CSS classname on the object.