Ejemplo de callback jquery

En esta ocasión mostrare un ejemplo efectuando el uso de callback de jquery, dicha funcion sirve como Una función de devolución de llamada la cual se ejecuta después de que el efecto actual esté terminado al 100%

Aqui el codigo:



<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>jQuery appletenhtml</title>
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="css/estilos.css">
</head>
<body>
    <div class="container-fluid-">
        <div class="row">
            <div class="col-md-4 caja col-centrar">
                <h3>jQuery - Efectos Toggle</h3>
                <br>
                <div class="esfera"></div>
                <br>
              
              
              
                <div id="base" class="mice" title="Titulo del contenedor">clic para mostrar contenido</div>
              
                <div id="panel">
                   EjemplosDp
                </div>
              
               <button class="btn brn-default" id="boton">Ocultar|Mostrar</button>
              
            </div>
        </div>
    </div>     
  
      
      <script src="js/jquery-3.2.0.min.js"></script>
       <script>
        $(function(){
          //toggleClass, fadeToggle, slideToggle y toggle
           $('.esfera').on('click',function(){
               $(this).toggleClass('azul');
           });
          
   //calbbalck  !!!
            $('h3').click(function(){
                          $('.esfera').fadeToggle('slow',function(){
                              $('.contenido').html('Haz utilizado el efecto fadeToggle');
                          });
                          });
   
   //añadiendo class si da click
            $('h3').click(function(){
                          $('.esfera').fadeToggle('slow');
                          });
          
            //añadir class a elemento con hover
              $('#base').hover(function(){
                          $('#panel').slideToggle('slow');
                          });
          
          
            $('#boton').click(function(){
                $('.esfera').toggle('fast');
            });
          
        });       
      </script>
      <script src="js/codigo.js"></script>
    
</body>
</html>



                                          Jquery


Enviar la entrada por correo electrónico

Comentarios

Publicar un comentario

Populares

Buscar en este blog