How to remove and add a class in one event?
See
function rodarslider(){
(...)
caption.classList.remove('sliderfect');
caption.classList.add('sliderfect');
(...)
}
The above function is the small snippet of a slider algorithm in pure JS that I'm doing.
caption
- it is the variable that stores the 'figurecaption' of my slider.
sliderfect
- it is the class that changes the caption position from direct to left with transition of 1 second and takes out the display:none
, making an animation.
My intention is to make in a single click event the class be removed soon then put again to cause effect. Only that does not happen.
Would be easy if there were two events, example: onmouseover
adds the class and onmouseout
removes the class. The challenge (for me) is to cause this animation in one event with each click.
If it was not clear I made this mini version of my script http://jsfiddle.net/hnnv8u1c/6 /
2 answers
I suggest a refactor...
Put everything in JavaScript to be easier to maintain.
var conteudo = {
imagens: ["http://4.ii.gl/Bnm_U8ns.png", "http://2.ii.gl/bd_ON1d34.png", "http://2.ii.gl/Nu3rNdWnD.png"],
titulo: ["Titulo do primeiro slide", "Titulo do segundo slide", "Titulo do terceiro slide"],
cor: ['#47ba38', '#386aba', '#f26b08']
};
var imagem = document.querySelector('section figure');
var titulo = document.querySelector('section h1');
var count = -1;
mudarSlide();
function mudarSlide() {
var esq = this.id == 'setaleft';
if (!esq && count == 2) count = -1;
if (esq && count == 0) count = 3;
esq ? count-- : count++;
imagem.style.backgroundImage = "url('" + conteudo.imagens[count] + "')";
imagem.style.backgroundColor = conteudo.cor[count];
titulo.classList.remove('transe');
titulo.innerHTML = conteudo.titulo[count];
titulo.classList.remove('sliderfect');
setTimeout(function () {
titulo.classList.add('transe');
titulo.classList.add('sliderfect');
}, 5);
}
document.getElementById('setaright').addEventListener('click', mudarSlide, false);
document.getElementById('setaleft').addEventListener('click', mudarSlide, false);
/* estilo fixo do slider */
/* ps: estilos de efeito no final */
section {
overflow: hidden;
position:relative;
max-width:300px;
height:100px;
margin:0 auto;
color:#fff;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}
section:hover #setaleft, section:hover #setaright {
opacity:1;
}
section figure {
padding:0;
margin:0;
background-position: center;
background-size:90px;
background-repeat:no-repeat;
width:100%;
height:100%;
position:absolute;
transition: 0.5s;
}
section div {
position:absolute;
top:30%;
width:100%;
margin:0 auto;
}
section div a {
font-size:1.8em;
text-decoration:none;
color:#fff;
opacity:0.5;
transition:0.5s;
}
section div :last-child {
float:right;
}
section h1 {
position:absolute;
width: 200px;
opacity:0;
bottom:-5px;
left:300px;
font-size:1em;
}
.transe {
transition: left 1s;
}
.sliderfect {
opacity: 1;
left: 5px;
}
<section>
<figure>
<!--vazio pois o script atua com troca de bg-->
</figure>
<div> <a href="#" id="setaleft"> <</a> <a href="#" id="setaright">> </a>
</div>
<h1 id="tit"> <!-- definido no js --> </h1>
</section>
No javascript required, just use CSS with the hover
selector and the transition
effect of CSS3.
.box {
position: relative;
overflow: hidden;
width: 300px;
height: 100px;
border: 1px solid black;
}
.caption {
position: absolute;
left: -100px;
width: 300px;
height: 100px;
transition: 1s;
}
.box:hover .caption {
transition: 1s;
left: 20px;
}
<div class="box">
<div class="caption">Titulo</div>
</div>