Jquery funcionas para añadir class css

En este ejemplo mostrare un conjunto de funciones con las cuales podemos añadir clases definidas en el css para efectuar el diseño buscado por medio de las funciones toggleClass, fadeToggle, slideToggle y toggle de jquery.

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>
//codigo jQuery
        $(function(){
          //toggleClass, fadeToggle, slideToggle y toggle
           $('.esfera').on('click',function(){
               $(this).toggleClass('azul');
           });
         
//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>







Comentarios

Entradas más populares de este blog

Ejemplo de suma Pascal

Solucion al error collation desconocida: 'utf8mb4_0900_ai_ci'