mouseover/out jQuery

322

13 октября 2017, 15:36

<a class="image" href="javascript:void(0)">
   <img src="img/address.png" alt="" onmouseover="this.src='img/address-hover.png'" onmouseout="this.src='img/address.png'">
</a>

Первый раз столкнулся с mouseover/out. Не знаю как переписать на jQuery и добавить плавности смены картинок.

Answer 1

Вот такой пример, с анимацией:

var src1 = 'http://wp.widewallpapers.ru/2k/nature/forest/1920x1200/forest-wallpaper-1920x1200-004.jpg'; 
var src2 = 'http://anywalls.com/pic/201210/1366x768/anywalls.com-14971.jpg'; 
$(document).ready(function(){ 
  $('.anim_img').bind('mouseover',function(){ 
    $(this).animate({ 
      opacity: 0 
    }, 500, function() { 
      $(this).attr('src',src2); 
      $(this).animate({ 
        opacity: 1 
      }, 500); 
    }); 
  }); 
  $('.anim_img').bind('mouseout',function(){ 
    $(this).animate({ 
      opacity: 0 
    }, 500, function() { 
      $(this).attr('src',src1); 
      $(this).animate({ 
        opacity: 1 
      }, 500); 
    }); 
  }); 
});

.anim_img{ 
  width: 150px; 
  height: auto; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<a class="image" href="javascript:void(0)"> 
   <img class="anim_img" src="http://wp.widewallpapers.ru/2k/nature/forest/1920x1200/forest-wallpaper-1920x1200-004.jpg" alt=""> 
</a>

Вот вариант второй анимация css:

.anim_img{ 
  max-width: 150px; 
  height: auto; 
  -webkit-filter: grayscale(0%); 
  -webkit-transition: .5s ease-in-out; 
  -moz-filter: grayscale(0%); 
  -moz-transition: .5s ease-in-out; 
  -o-filter: grayscale(0%); 
  -o-transition: .5s ease-in-out; 
} 
.anim_img:hover{ 
  -webkit-filter: grayscale(100%); 
  -webkit-transition: .5s ease-in-out; 
  -moz-filter: grayscale(100%);  
  -moz-transition: .5s ease-in-out; 
  -o-filter: grayscale(100%);  
  -o-transition: .5s ease-in-out; 
}

<a class="image" href="javascript:void(0)"> 
   <img class="anim_img" src="http://wp.widewallpapers.ru/2k/nature/forest/1920x1200/forest-wallpaper-1920x1200-004.jpg" alt=""> 
</a>