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

delay hover w jq

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
0 głosów
208 wizyt
pytanie zadane 27 maja 2018 w JavaScript przez niezalogowany
edycja 27 maja 2018

Hej. Po hoverze chcę zmieniać obrazek na inny, ale w poradzonym kodzie nie potrafię uzyskać delaya.

Wie ktoś jak można to poprawić?

Kod działający bez delay:

$( "#img" ).hover(
  function() {
    $(this).attr("src", "http://icons.iconarchive.com/icons/tatice/operating-systems/256/Linux-icon.png");
  }, function() {
    $(this).attr("src", "http://files.softicons.com/download/application-icons/programmers-pack-icons-by-iconshock/png/256/linux.png");
  }
);

Kod po zmianach(nie działający):

var timeout;
        $( "#img" ).hover(
            
            function(){
                
                timeout = setTimeout(function(){
            
                
                    $(this).attr("src", "http://icons.iconarchive.com/icons/tatice/operating-systems/256/Linux-icon.png");
                
            
                }, 500);
            },
            
            function() {
                clearTimeout(timeout);
                $(this).attr("src", "http://files.softicons.com/download/application-icons/programmers-pack-icons-by-iconshock/png/256/linux.png");
            }
        );

Czy da się z tego płynnie przejść z jednego obrazka do drugiego i z powrotem?

 

Próba inna, tez bez skutku:

 function podmianka(){
            $( "#img" ).hover(
                function() {
                    $(this).attr("src", "http://icons.iconarchive.com/icons/tatice/operating-systems/256/Linux-icon.png");
                    }, function() {
                        $(this).attr("src", "http://files.softicons.com/download/application-icons/programmers-pack-icons-by-iconshock/png/256/linux.png");
                        }
            )
};
              
  setTimeout(podmianka, 2000);     

 

komentarz 27 maja 2018 przez Mariusz08 Maniak (62,280 p.)
Zły język bloczka z kodem
komentarz 27 maja 2018 przez niezalogowany
sorki

1 odpowiedź

0 głosów
odpowiedź 27 maja 2018 przez hoktaur Pasjonat (22,250 p.)
wybrane 27 maja 2018
 
Najlepsza
$( "#img" ).hover(
  function() {
		setTimeout(
    	function() {$("#img").attr("src", "http://icons.iconarchive.com/icons/tatice/operating-systems/256/Linux-icon.png")}, 
    2000);
	}, function() {
    $("#img").attr("src", "http://files.softicons.com/download/application-icons/programmers-pack-icons-by-iconshock/png/256/linux.png")
  }
);

O to chodziło ? Swoją drogą nie lepiej hover w CSS

komentarz 27 maja 2018 przez niezalogowany

Tak, dziękuję, dokładnie przed chwilą udało mi się to uzyskać na około i okazało się, że to nie takie płynne, znaczy: myślałam, że to będzie jak ease transition :D mój błąd, ale dobrze jest poznać ten kod i chyba zostawię, Twój jest zwięzły, dzięki.

 

Z CSS próbowałam, poradzono mi w innym temacie zainspirować się kodem

.obraz1:hover + .obraz2{
     opacity:0;
}

Tylko że ja potrzebuję po najechaniu mieć opacity z obrazu 1 = 0, a z obrazu 2 zmienione z 0 na 1.

Zaczęłam tak:

.logo1
{
    position: absolute;
}

.logo2
{
    position: relative;
}

.logo1 + .logo2
{
    opacity: 0;
}

lecz potem gdy próbowałam wybrać .logo1:hover i zmienić mu opacity na 0 (nic się nie zadziało) plus następnie .logo1:hover + .logo2 i zmienić opacity na 1 (i też nic).

Dopiero .logo2:hover zareagowało, ale

.logo2:hover ~ .logo1
{
opacity: 0;
{

nie zmieniło widoczności logo1.

 

Szukałam w związku z tym pomocy, ale przekierowano mnie z powrotem do jquery. Pozdrawiam

komentarz 27 maja 2018 przez hoktaur Pasjonat (22,250 p.)

W CSS coś takiego:

<div id="img">

</div>
#img {
  background-image: url(http://icons.iconarchive.com/icons/tatice/operating-systems/256/Linux-icon.png);
  border: 1px solid red;
  width: 256px;
  height: 256px;
  animation-delay: 2s;
}

#img:hover {
   animation-delay: 2s;
   animation-name: example;
   animation-fill-mode: forwards;
   animation-duration: 1s
}

@keyframes example {
  0% {
    opacity: 1;
  }
  30% {
    opacity: 0;
  }
  50% {

  }
  100% {
    background-image: url(http://files.softicons.com/download/application-icons/programmers-pack-icons-by-iconshock/png/256/linux.png);
    opacity: 1;
  }
}

 

komentarz 27 maja 2018 przez niezalogowany
Dziękuję, mam w planach wykorzystać to do drugich ćwiczeń, ale w tym akurat mam juz inny background pod obrazkami, wspólny kilku tagom :| i dlatego to rozwiązanie zostało odłożone :)

 

Ale i tak dziękuję, nauki nigdy dość.

Podobne pytania

0 głosów
2 odpowiedzi 508 wizyt
pytanie zadane 2 września 2017 w JavaScript przez Sebix71 Początkujący (260 p.)
0 głosów
1 odpowiedź 220 wizyt
pytanie zadane 8 grudnia 2016 w JavaScript przez hoktaur Pasjonat (22,250 p.)
0 głosów
2 odpowiedzi 283 wizyt
pytanie zadane 14 września 2015 w JavaScript przez makoso Mądrala (7,380 p.)

93,108 zapytań

142,086 odpowiedzi

321,610 komentarzy

62,449 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

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...