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

delay hover w jq

VPS Starter Arubacloud
0 głosów
166 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,300 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 291 wizyt
pytanie zadane 2 września 2017 w JavaScript przez Sebix71 Początkujący (260 p.)
0 głosów
1 odpowiedź 158 wizyt
pytanie zadane 8 grudnia 2016 w JavaScript przez hoktaur Pasjonat (22,250 p.)
0 głosów
2 odpowiedzi 235 wizyt
pytanie zadane 14 września 2015 w JavaScript przez makoso Mądrala (7,380 p.)

92,455 zapytań

141,263 odpowiedzi

319,099 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!

...