jQuery Effects - Exercises, Practice, Solution

Last update on May 31 2023 16:03:39 (UTC/GMT +8 hours)

jQuery Effects [14 exercises with solution]

[An editor is available at the bottom of the page to write and execute the scripts. Go to the editor]

1. Animate an element, by changing its height and width.
Sample Data :

HTML Code:

<body>
 <button id="btn1">Animate height & width</button>
 <button id="btn2">Reset</button>
 <div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;"></div>
</body>

Click me to see the solution

2. Stop an animation.
Sample Data :

HTML Code:

<body>
<button id="btn1">Start Animate</button>
<button id="btn2">Stop Animate</button>
<div id="box" style="background:#5858FA;height:100px;width:100px;margin:6px;"></div>  
</body>

Click me to see the solution

3. Set a timer to delay execution of subsequent items in the queue.
Sample Data :

HTML Code:

<body>
<button id="btn1">Start Animate</button>
<button id="btn2">Stop Animate</button>
<div id="box" style="background:#5858FA;height:100px;width:100px;margin:6px;"></div>  
</body>

Click me to see the solution

4. Use dequeue to end a custom queue function which allows the queue to keep going.
Click me to see the solution

5. Fade in and fade out all division elements.
Sample Data :

HTML Code:

<body>
 <div style="background:#2E9AFE;width:100%;">My Effect is fadeOut Effect</div>
 <button id="btn2">Fade In (3 Second)</button>
 <button id="btn1">Fade Out (3 Second)</button>
 </body>

Click me to see the solution

6. Animates a paragraph to fade to an specified opacity (complete the animation within 500 milliseconds).
Sample Data :

HTML Code:

<body>
<p> Click this paragraph to see it fade.</p>
</body>

Click me to see the solution

7. Write a jQuery Code to get a single element from a selection.
Sample Data :

HTML Code:

<body>
<ui>
<li>Html Tutorial</li>
<li>Mongodb Tutorial</li>
<li>Python Tutorial</li>
</body>

Click me to see the solution

8. Toggle between fading in and fading out different boxes.
Sample Data :

HTML Code:

<body>
<p>fadeToggle() with different speed parameters.</p>  
<button>Click to fade in/out boxes</button><br><br>
<div id="div1" style="width:100px;height:100px;background-color:#6D5050;"></div>
<br>
<div id="div2" style="width:100px;height:100px;background-color:#42D5A9;"></div>
<br>
<div id="div3" style="width:100px;height:100px;background-color:#8942D5;"></div>
</body>

Click me to see the solution

9. Finish a currently running animation:

Click me to see the solution

10. Animates all shown paragraphs to hide slowly (complete the animation within specified time).
Sample Data :

HTML Code:

<body>
<p>User ID : <input type="text" id='field1'></p>
<p>Password : <input type="password" id='field2'>
</body>

Click me to see the solution

11. Run an animation with less frames.
Sample Data :

HTML Code:

<body>
<p><input type="button" value="Run"></p>
<div></div>
</body>

Click me to see the solution

12. Toggle animation on and off.
Sample Data :

HTML Code:

<button id="enable">(Enable) jQuery.fx.off = false)</button>  
<button id="disable">(Disable) jQuery.fx.off = true)</button>
<br><br>
<button id="toggle">Toggle animation</button>
<div style="background:#98bf21;height:100px;width:100px;margin:50px;"></div>

Click me to see the solution

13. Animates all hidden elements to show slowly.
Sample Data :

HTML code:

<body>
<button>Show it</button>
<p style="display: none">Hello</p>
</body>

Click me to see the solution

14. Animates all divs to slide down and slide up.
Sample Data :

HTML code:

<body>
 <button class="btn1">Slide down</button>
 <button class="btn2">Slide up</button>
 <br><br>
  <div></div>
  <div></div>
  <div></div>
</body>

Click me to see the solution

More to Come !

Do not submit any solution of the above exercises at here, if you want to contribute go to the appropriate exercise page.

Live Demo:

See the Pen common-jquery-core-exercise by w3resource (@w3resource) on CodePen.