Witam!
Tworze portfolio w którym chciałem zrobić chyba całkiem prostą animacje po najechaniu polegającą na odwróceniu elementu o 180* na osi Y, podmianie grafiki (zmiana src do grafiki dodając 1 na końcu nazwy przed rozszerzeniem) w połowie obrotu i wyświetleniu tekstu. Tekst jest niewidoczny przed najechaniem bo jest odwrócony o 90* na osi Y. Transition obrotu trwa .6s także dodałem timeout który po 300ms zamienia grafike i obraca tekst tak aby pokazać "drugą strone tarczy". I teraz jeżeli najade na element na odpowiednio długo to wszystko działa tak jak chce. Jednak jeżeli odrazu zjade z elementu to timeout sie wykonuje później i animacja zaczyna sie wykrzaczać. Podmiana obrazka miga i wraca do odpowiedniego stanu (jednak to miganie też nie jest ok) a tekst w ogóle nie znika i pojawia się w momencie w którym go nie powinno być. Po wykrzaczeniu jeśli najade na dłużej to wszystko sie naprawia jednak przy na przykład przypadkowym szybkim przejechaniu myszką po wszystkich elementach animowanych w ten sposób na każdym jest błąd. I tutaj prosze o pomoc. Czy wie ktoś może jak mógłbym to naprawić?
oto kod JS:
const rotate=()=>{
$('.skill').hover(
function(){
$('img',this).addClass('rotate');
setTimeout(()=>{
$('p', this).css('transform','rotateY(0deg)');
$('img',this).attr('src', ()=>{
let src=$('img',this).attr('src');
src=src.substr(0,src.lastIndexOf('.'));
src=src+'1.png';
return src;
})
},300)
},
function(){
$('img',this).removeClass('rotate');
$('p', this).css('transform','rotateY(90deg)');
setTimeout(()=>{
$('img',this).attr('src', ()=>{
let src=$('img',this).attr('src');
src=src.substr(0,src.lastIndexOf('.')-1);
src=src+'.png';
return src;
})
},300)
}
)
}
tutaj HTML:
<div class='skill'>
<h1> Nagłówek </h1>
<img src="obrazek ktory sie obraca">
<p> jakiś tekst który też jest animowany </p>
</div>
no i takich elementów jest na stronie 6
i css:
.skill{
margin-top: 1rem;
font-size: 1.9rem;
position: relative;
}
.skill h1{
line-height: .8;
}
.skill p{
font-size: 1rem;
width: 65%;
color: white;
position: absolute;
margin: 37% auto 0 auto;
top: 0;
left: 0;
right: 0;
transform: rotateY(90deg);
transition: 0.3s ease;
}
.skill img {
transition: .6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.rotate{
transform: rotateY(180deg);
}
Mam nadzieje że wystarczająco zarysowałem spawe :) z góry dziękuje za pomoc