How to use Explode effect in jQuery ?
The Explode effect can be used with show/hide/toggle element. This explodes or implodes the element into/from many pieces.
Syntax:
selector.hide | show | toggle( "explode", {arguments}, speed );
Parameters:
- pieces: It holds the number of pieces. The default pieces are 9.
- Mode: The mode of the animation.
The number of pieces to explode should be a perfect square, any other values are rounded to the nearest square.
Example: Hide and Show Div using button with Explode Effect.
<!DOCTYPE HTML> < html > < head > < title >Explode Example</ title > < script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" > </ script > < script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" > </ script > < script type = "text/javascript" language = "javascript" > $(document).ready(function() { $("#hide").click(function(){ $(".target").hide( "explode", {pieces: 9 }, 2000 ); }); $("#show").click(function(){ $(".target").show( "explode", {pieces: 9}, 2000 ); }); }); </ script > </ head > < body style = "text-align:center;" > < h1 style = "color:green;" > w3wiki </ h1 > < p style = "font-size: 20px; font-weight: bold;" > Click on any of the buttons </ p > < button id = "hide" > Hide </ button > < button id = "show" > Show</ button > < br >< br > < div class = "target" style="width:100px;height:100px; background:#0f9d58;margin:0 auto;"> </ div > </ body > </ html > |
Output:
Contact Us