Suavizar troca de classes Jquery

[karolbraga 0]

Saudações pessoal.

 

É o seguinte, gostaria de um efeito parecido com o fadeIn do jquery no background quando ocorre a troca das classes.

 

Vou explicar melhor, tenho um elemento que se move de acordo com o mouseover de uma grid oculta na tela. Quando passo o mouse na grid1, por exemplo, o elemento troca de classe, e essa classe altera o background do elemento e assim por diante. Tenho 5 classes e gostaria que o efeito de troca não ficasse tão brusco.

 

Tentei o transition do CSS3, mas ele não faz a transição de backgrounds de classes diferentes.

 

Aguardo, desde já obrigada.

[ignoredxyz 17]

Tente usar o próprio fadeIn().

Exemplo:

$(document).ready(function(){
    $("#elementId").mouseover(function(){
        $(this).fadeOut('fast', function(){
            $(this).removeClass("classParaRemover").addClass("classParaAdd");
        }).fadeIn('fast');
    });
});

 

[William Bruno 1501]

o transition do css3 faz transição entre valores numéricos, se os backgrounds forem 2 cores ele fará.

 

se forem imagens, ai vc tem q partir para animar algo como opacity.

[karolbraga 0]

Caio, tentei utilizar o fadeIn, mas como a transição é com imagens e se dá em um intervalo muito curto, não fica com o efeito desejado. Mas valeu cara.

[William Bruno 1501]

@karolbraga, uma coisa que fazemos para transição de backgrounds é posicionar um elemento em cima do outro.

 

O de cima some com fadeOut e o de baixo aparece com fadeIn, a sobreposição dos elementos é q cuida de deixar o efeito "suave"

 

Por exemplo, esse aqui:

http://wbruno.github.io/slideshow/fade.html

 

o truque foi posicionar um elemento em cima do outro.

[karolbraga 0]

William, o transition também não resolve meu problema. Acredito que seja necessário a adição de mais frames na animação. De qualquer forma, valeu pela dica.

O problema William é que tenho só um elemento, com posição absoluta que vai trocando de classe de acordo com o over do mouse, por isso pensei em alguma forma de suavizar a troca dessas classes.

[William Bruno 1501]

A única forma de suavizar a troca de imagens é com mais de um elemento. Infelizmente..

[Caio Cafardo 7]

Tem algo online para a gente entender melhor?

[karolbraga 0]

Mas de qualquer forma, valeu pelas dicas William :)