jQuery Effects - Exercises, Practice, Solution

Last update on May 30 2022 10:19:49 (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.]

1. Animate an element, by changing its height and width. Go to the editor
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. Go to the editor
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. Go to the editor
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. Go to the editor
Click me to see the solution

5. Fade in and fade out all division elements. Go to the editor
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). Go to the editor
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. Go to the editor
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. Go to the editor
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: Go to the editor

Click me to see the solution

10. Animates all shown paragraphs to hide slowly (complete the animation within specified time). Go to the editor
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. Go to the editor
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. Go to the editor
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. Go to the editor
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. Go to the editor
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.