delay hover w jq

Question

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);     

 

Comments

Zły język bloczka z kodem

---

sorki

Answer 1

$( "#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

Comments

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

---

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;
  }
}

 

---

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ść.