Tutoriais (1)
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);
}