Tutoriais (1)

quarta-feira, 15 julho 2015 17:54

Alternar classes com JQuery

Escrito por

para alternar entre classes

HTML:

<div id="IDdoDiv" class="escondido">
<a class="LinkAbrir" title="Abrir"></a>
<a class="LinkFechar escondido" title="Fechar"></a>
</div>

JQuery:

 

<script type="text/javascript">
$(document).ready(function({

$(".LinkAbrir").click(function(){ // identifica o elemento
$("#IDdoDIV").removeClass("escondido"); // remove a classe "escondido"
$("#IDdoDIV").addClass("visivel"); // insere a classe "visivel"
});
});
$(document).ready(function(){
$(".LinkFechar").click(function(){
$("#IDdoDIV").removeClass("escondido");
$("#IDdoDIV").addClass("visivel");
});
});
</script>

 

CSS

 

movimentar o div com css

 

.visivel {

transition: All 1s ease-in-out;
-webkit-transition: All 1s ease-in-out;
-moz-transition: All 1s ease-in-out;
-o-transition: All 1s ease-in-out;
transform: rotate(0deg) scaleX(1) skew(0deg) translateY(0px);
-webkit-transform: rotate(0deg) scaleX(1) skew(0deg) translateY(0px);
-moz-transform: rotate(0deg) scaleX(1) skew(0deg) translateY(0px);
-o-transform: rotate(0deg) scaleX(1) skew(0deg) translateY(0px);
-ms-transform: rotate(0deg) scaleX(1) skew(0deg) translateY(0px);
}

 

 

 

.escondido {
transition: All 2s ease-in-out;
-webkit-transition: All 2s ease-in-out;
-moz-transition: All 2s ease-in-out;
-o-transition: All 2s ease-in-out;
transform: rotate(0deg) scale(1) skew(0deg) translateY(-4000px);
-webkit-transform: rotate(0deg) scale(1) skew(0deg) translateY(-4000px);
-moz-transform: rotate(0deg) scale(1) skew(0deg) translateY(-4000px);
-o-transform: rotate(0deg) scale(1) skew(0deg) translateY(-4000px);
-ms-transform: rotate(0deg) scale(1) skew(0deg) translateY(-4000px);
}