• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

jQuerry hover problem

VPS Starter Arubacloud
0 głosów
144 wizyt
pytanie zadane 7 listopada 2018 w JavaScript przez Jestem_Szaleńcem Użytkownik (530 p.)
edycja 7 listopada 2018 przez Jestem_Szaleńcem

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 

1 odpowiedź

+1 głos
odpowiedź 7 listopada 2018 przez rafal.budzis Szeryf (85,260 p.)
wybrane 7 listopada 2018 przez Jestem_Szaleńcem
 
Najlepsza

Wydaje mi się ze warto rozważyć użycie czystego CSSa. Bez jQuery zazwyczaj jest mniej problemów z animacjami ;) W css jesteś w stanie budować selektory hover w środku np 
 

.skill:hover h1{ 
} 

Jeśli chcesz poprawić swój skrypt musisz zapisywać sobie ID timera i go czyścić. Wówczas funkcja się nie wykona ;) 

 

let rotateTimeoutId = 0;
const rotate=()=>{
$('.skill').hover(
    function(){
        $('img',this).addClass('rotate');
        clearTimeout(rotateTimeoutId);
        rotateTimeoutId = 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)');
        clearTimeout(rotateTimeoutId);
        rotateTimeoutId = setTimeout(()=>{
            $('img',this).attr('src', ()=>{
                let src=$('img',this).attr('src');
                src=src.substr(0,src.lastIndexOf('.')-1);
                src=src+'.png';
                return src;
            })
        },300)
    }
)
}

 

komentarz 7 listopada 2018 przez Jestem_Szaleńcem Użytkownik (530 p.)

Wielkie dzięki!!!

Spróbowałem twoim sposobem i to nie do końca rozwiązuje problem. Sam kombinowałem trochę wcześniej z zerowaniem timeoutu jednak przy takim rozwiązaniu skrypt zaczyna mi usuwać kolejne literki z końca src. I tak na przykład zamiast html.png mam htm.png który nie istnieje. Nawet kiedy wyciągne operacje ustawiania src poza timeout tak jak tu

let timeoutId=0;
const rotate=()=>{
$('.skill').hover(
    function(){
        $('img',this).addClass('rotate');
        let src=$('img',this).attr('src');
            src=src.substr(0,src.lastIndexOf('.'));
            src=src+'1.png';
        clearTimeout(timeoutId);
        timeoutId=setTimeout(()=>{
            $('p', this).css('transform','rotateY(0deg)');
            $('img',this).attr('src', src);
        },300)
    },
    function(){
        $('img',this).removeClass('rotate');
        $('p', this).css('transform','rotateY(90deg)');
        clearTimeout(timeoutId);
        let src=$('img',this).attr('src');
                src=src.substr(0,src.lastIndexOf('.')-1);
                src=src+'.png';
        timeoutId=setTimeout(()=>{
            $('img',this).attr('src', src)},300)
    }
)
}

:/ 

komentarz 7 listopada 2018 przez rafal.budzis Szeryf (85,260 p.)

Najłatwiej było by zapisać po prostu całą ścieżkę ;) Wszystko psuje ten 

src.lastIndexOf('.')-1

Spróbuj to :

let src=$('img',this).attr('src');
                src=src.substr(0,src.lastIndexOf('.')-1);
                src=src+'.png';
        timeoutId=setTimeout(()=>{
            $('img',this).attr('src', src)},300)

skrócić do :

         timeoutId=setTimeout(()=>{
             $('img',this).attr('src', './cala/sciezka/do/innego/obrazka.png')},300)

 

komentarz 7 listopada 2018 przez Jestem_Szaleńcem Użytkownik (530 p.)
Tylko że to działa na 6 różnych ścieżkach i w każdym przypadku dodaje tylko '1' na końcu. Pliki nazywają sie odpowiednio html.png => html1.png , css.png => css1.png itd. To miał być właśnie taki ekstra myk żeby napisać raz uniwersalnie.
Generalnie robie mega refaktoryzacje portfolio po nauczeniu sie wielu rzeczy i tak to sobie wymyśliłem bo tak łopatologicznie ze ścieżkami do każdego pliku było już zrobione dawno temu temu ;)
komentarz 7 listopada 2018 przez rafal.budzis Szeryf (85,260 p.)
Możesz nazwać pliki podstawowe np html0.png i html1.png gdy będą miały taką samą długość również pozbędziesz się odejmowania ;)

Możesz też wykorzystać dataset i w znaczniku odpowiedniego obrazka stworzyć sobie atrybut data-hover-scr gdzie będziesz trzymał całą ścieżkę do obrazu ;)
komentarz 7 listopada 2018 przez Jestem_Szaleńcem Użytkownik (530 p.)
Wielkie dzięki! Boże jak ja mogłem nie pomyśleć o dodaniu 0 czy jakiegoś innego znaku żeby nazwy miały taką samą długość :D

Teraz już wszystko działa. Jednak to moje super rozwiązanie chyba jest na nic bo jeżeli najade odrazu z jednego obrazka na drugi to timeout tego pierwszego sie zeruje i zostaje ze zmienioną grafiką xD

Musze chyba to w jakiś inny sposób zaimplementować :/
komentarz 7 listopada 2018 przez Jestem_Szaleńcem Użytkownik (530 p.)

O jednak to rozwiązałem laugh zerując tylko pierwszy timeout okazało się że wszystko działa jak powinno heart wielkie dzięki za pomoc!!!

Podobne pytania

+1 głos
1 odpowiedź 195 wizyt
pytanie zadane 4 listopada 2017 w JavaScript przez lastavenger Obywatel (1,060 p.)
0 głosów
0 odpowiedzi 258 wizyt
pytanie zadane 24 października 2017 w JavaScript przez Riddick Bywalec (2,600 p.)
0 głosów
2 odpowiedzi 536 wizyt
pytanie zadane 27 września 2017 w JavaScript przez Radek Begej Użytkownik (580 p.)

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...