Menu
Icon

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>







}

Utilizamos cookies propias y de terceros con finalidades analiticas y para mejorar tu experiencia de compras segun tus preferencias, mediante el analisis de tus habitos de navegacion y tu perfil. Puedes aceptar todas las cookies pulsando el boton "Aceptar" o gestionar tus preferencias en el panel de configuracion