Есть ли способ добавить задержку на эффекте наведения?

Что я хотел бы сделать, так это то, что когда изображение меняется после наведения, оно остается таким в течение нескольких секунд, а затем возвращается к исходному изображению.
Я хотел бы знать, есть ли способ добавить такую задержку. Я прикрепил свой код ниже.

<html>

<body>

<img src='http://www.freedigitalphotos.net/images/img/homepage/87357.jpg'
     width='142' height='162'
     onmouseover="this.src='http://7606-presscdn-0-74.pagely.netdna-cdn.com/wp-content/uploads/2016/03/Dubai-Photos-Images-Oicture-Dubai-Landmarks-800x600.jpg';"
     onmouseout="this.src=http://7606-presscdn-0-74.pagely.netdna-cdn.com/wp-content/uploads/2016/03/Dubai-Photos-Images-Oicture-Dubai-Landmarks-800x600.jpg';" />

</body>

</html>

5 ответов

  1. Измените onmouseoutсобытие, чтобы вызвать функцию JS с помощью setTimeout

    setTimeout(function(){
          this.src= "...";
     }, 5000);
    

    Где 5000 — время в миллисекундах, которое вы хотите задержать.

  2. Вы можете просто использовать CSS-переходы.

    .button {
       background-color: #222;
       color: #fff;
       padding: 14px 36px;
       text-decoration: none;
       transition: 0.6s background-color ease
    }
    
    .button:hover {
        background-color: #555;
    }
    <a href='#' class='button'>Hover me</a>

  3. См. этот пример, чтобы изменить <img> srcс onmouseoverсобытием и ждать 3, а затем вернуться к исходному изображению onmouseout

    //copy original img to variable
    var original = $("img")[0].src;
    //mouse over event
    $("img").mouseover(function() {
      $(this).fadeOut("fast").fadeIn("fast");
      //change image
      $(this)[0].src = "http://7606-presscdn-0-74.pagely.netdna-cdn.com/wp-content/uploads/2016/03/Dubai-Photos-Images-Oicture-Dubai-Landmarks-800x600.jpg";
    });
    //mouse out event
    $("img").mouseout(function() {
      var img = $(this);
      //on mouse over wait 3 second and getback to original img
      setTimeout(function() {
        img.fadeOut("fast").fadeIn("fast");
        img[0].src = original;
      }, 3000);
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <img src='http://www.freedigitalphotos.net/images/img/homepage/87357.jpg' width='142' height='162' />

  4. Используйте CSS-переходы со transition-delayсвойством.

    .classname {
      width: 100px;
      height: 100px;
      background-color: red;
      transition-property: background-color;
      transition-delay: 1s;
      transition-duration: 0.1s;
    }
    
    .classname:hover {
      transition-delay: 0s;
      background-color: blue;
    }
    
    .image {
      width: 142px;
      height: 162px;
      background-image: url('http://www.freedigitalphotos.net/images/img/homepage/87357.jpg');
      background-size: 100% 100%;
      transition-property: background-image;
      transition-delay: 1s;
      transition-duration: 0.1s;
    }
    
    .image:hover {
      transition-delay: 0s;
      background-image: url('http://7606-presscdn-0-74.pagely.netdna-cdn.com/wp-content/uploads/2016/03/Dubai-Photos-Images-Oicture-Dubai-Landmarks-800x600.jpg')
    }
    <div class="classname"></div>
    
    <div class="image"></div>

  5. Существует несколько способов сделать это.
    Вы можете попробовать фрагмент ниже:

    <div>
        <img src='http://7606-presscdn-0-74.pagely.netdna-cdn.com/wp-content/uploads/2016/03/Dubai-Photos-Images-Oicture-Dubai-Landmarks-800x600.jpg' width='142' height='162'/>
        <img src='http://www.freedigitalphotos.net/images/img/homepage/87357.jpg' width='142' height='162'/>
      </div>
    
    div{
      width:142px; 
      height:162px;
      overflow: hidden; /*required*/
    }
    div img{
      position: absolute;
      transition: opacity .5s ease;
      transition-delay: .5s; /*time of transition that you want*/
    }
    div img:hover{
      opacity: 0;
    }
    

    Другой способ — просто использовать фон этих изображений и управлять каждым из них.

    Полный пример: jsbin