¿Cómo usar el efecto Explotar en jQuery?

El efecto Explotar se puede usar con el elemento mostrar/ocultar/alternar. Esto explota o implosiona el elemento en/desde muchas piezas.

Sintaxis:

selector.hide | show | toggle( "explode", {arguments}, speed );

Parámetros:

  • piezas: Contiene el número de piezas. Las piezas por defecto son 9.
  • Modo: El modo de la animación.
  • El número de piezas a explotar debe ser un cuadrado perfecto, cualquier otro valor se redondea al cuadrado más cercano.

Ejemplo: Ocultar y mostrar Div usando el botón con efecto de explosión.

<!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;" > 
            GeeksforGeeks 
    </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>

Producción:

Publicación traducida automáticamente

Artículo escrito por bobby_rao y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *