The script.aculo.us library is a cross-browser library that aims to improving the user interface of a website. In this article, we will demonstrate the Move effect. This effect is used for making the element smoothly move to the given parameters. We can adjust the duration of the effect as well.
Syntax:
Effect.Move('object', [options] )
Parameters: This effect has three parameters in the options object described below:
- x: It is an integer that represents the new left value, either absolutely or relatively depending on the mode.
- y: It is an integer that represents the new top value, either absolutely or relatively depending on the mode.
- mode: It is a string that specifies if the element is moved absolutely or relative to its own position.
To demonstrate the use of this function, we have written a small piece of code. In which we have written a small JavaScript function named ShowEffect method which uses the Move method of this library. The examples below demonstrate the method.
Example 1:
HTML
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="prototype.js"> </script> <script type="text/javascript" src="scriptaculous.js"> </script> <script type="text/javascript"> function ShowEffect(element) { // Using the Move effect to // move the element to the // given absolute position new Effect.Move(element, { x: 0, y: 0, mode: 'absolute' }); } </script> </head> <body> <h1 style="color: green;"> neveropen </h1> <h2>script.aculo.us Move Effect</h2> <button onclick="ShowEffect('hideshow')"> Click me to Move the line! </button> <br><br> <div id="hideshow" style="position: absolute;"> LINE TO MOVE </div> </body> </html> |
Output:
Example 2:
HTML
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="prototype.js"> </script> <script type="text/javascript" src="scriptaculous.js"> </script> <script type="text/javascript"> function ShowEffect(element) { // Using the Move effect to // move the element to the // given relative position new Effect.Move(element, { x: 50, y: -50, mode: 'relative' }); } </script> </head> <body> <h1 style="color: green;"> neveropen </h1> <h2>script.aculo.us Move Effect</h2> <button onclick="ShowEffect('neveropen_1')"> Click me to show the effect </button> <br><br> <div id="neveropen_1" style= "position: absolute; top: 250px"> neveropen </div> </body> </html> |
Output:
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
