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
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>
<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
Publicar un comentario