Como fazer um efeito crossfade em mudança de src da mesma tag <img/> [JQUERY]

[André Ciappina 0]

E aí pessoal! Eu tô desenvolvendo um modelo de portfólio fotográfico, por razões de aprendizado mesmo, mas travei em um momento e passei o dia pesquisando como fazer isso.

Basicamente, é uma espiral áurea de imagens que trocam de lugar, dando a impressão de infinidade.

• Se você clicar na maior, ela fica em tela cheia;
• Clicando nas outras, todas as imagens se movem ao quadrado seguinte.

 

Até agora há pouco, eu estava fazendo isso mudando a posição de cada div onde a imagem fica, por meio de addClass() e removeClass(). Só que assim tava muito difícil imaginar como eu alcançaria o efeito de infinidade das imagens, já que apenas seis imagens aparecem de cada vez, então são seis DIVs se movimentando a cada clique - isso se complicaria quando eu tentasse colocar muitas imagens a serem disponibilizadas na página.

 

Mas hoje eu tentei outro método: agora são 6 divs com uma imagem dentro cada um, mas não é a posição deles que mudará, e sim o atributo src="" da tag <img/>. Pra isso, usei attr().

Então cada src altera de valor em fila, cada vez que eu clico no gatilho.

 

Só que mudar o src vai além de CSS, então eu não posso usar transition como antes. Agora o máximo que eu posso fazer é um crossfade entre as imagens. Só que o fadeOut() e fadeIn() também não funcionam! Tecnicamente, funcionam, mas não visualmente. Pra consertar isso eu já tentei delay(), stop(), finish(), promise(), toggleClass() entre outros jeitos.

 

Bom, já falei demais, vocês podem ver a página funcionando no CodePen:

https://codepen.io/dehciappina/pen/yjWOdM

 

Nesse código eu usei toggleClass, pois foi o único jeito que consegui ver um fade de verdade. Mas, obviamente, não funciona, já que o toggle se aplica à mesma tag <img/> e ou faz ela desaparecer completamente com um clique, ou eu uso dois toggle e eles se anulam quando a função é chamada.

 

Bom, é isso, espero ter me explicado o suficiente. Obrigado!!!