How to remove and add a class in a SINGLE event?

Question

Look at

function rodarslider(){
     (...)
     caption.classList.remove('sliderfect');
     caption.classList.add('sliderfect');
     (...)
}

The above function is the little chunk of the algorithm of a pure JS slider that I’m doing.

caption - is the variable that stores the figurecaption of my slider.

sliderfect - is the class that changes the caption position from direct to left with 1 second Transition and takes the display:none, animate.

My intention is to have the class removed in a single click event immediately after being put back into effect. Only that doesn’t happen.

It would be easy if there were two events, example: onmouseover adds the class and onmouseout class. The challenge (for me) is to cause this excitement in one event every click.

If it wasn’t clear I made this mini version of my script http://jsfiddle.net/hnnv8u1c/6/

Answer 1

I suggest a refactor...

Put everything in Javascript to make it 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">&nbsp;<</a>  <a href="#" id="setaright">>&nbsp;</a> 
    </div>
     <h1 id="tit"> <!-- definido no js --> </h1>
</section>

Answer 2

No javascript required, just use CSS with the selector hover and the effect transition 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>