Как угасать атрибут src изображения?

Question

я обнаружил, что это можно сделать так:

$(".topImage img") 
     .mouseover(function() { 
      var src = $(this).attr("src").match(/[^\.]+/) + "-bw.png"; 
      $(this).fadeOut("fast").attr("src", src).fadeIn("fast"); 
     }) 
     .mouseout(function() { 
      var src = $(this).attr("src").replace("-bw.png", ".png");     
      $(this).fadeOut("fast").attr("src", src).fadeIn("fast"); 
     }); 
    }); 

, но это делает плохо, потому что исчезает предыдущий SRC полностью. Есть ли способ, с помощью которого можно было бы изменить это изменение src, чтобы не было «теперь это белый фон перед загрузкой новых src»?

Редактировать

<div class="topImage"> 
    <img src="<?=$img[0]?>"> 
</div> 

Вот как это должно оставаться - только один образом в topImage контейнере таким образом имеющий два изображения, которые меняют прозрачность, это не вариант.

Answer 1

Есть лучшие способы справиться с этим.

Посмотрите на этот fiddle

одно изображение всегда видна. Второе изображение просто исчезло или исчезло.

Это единственный JQuery код, который нужно для достижения эффекта

/* Set images to full screen */   
    $(".fader").mouseover(function() { 
     $("#mask2").stop().fadeIn(800); 
    }); 
    $(".fader").mouseout(function() { 
     $("#mask2").stop().fadeOut(800); 
    }); 

Остальная часть работы выполняется с помощью CSS

.fader { 
    border: 5px solid blue; 
    background-color: white; 
    top: 0; 
    right: 0; 
    position: fixed; 
} 
.mask { 
    position: absolute; 
    z-index: -10; 
    min-width: 100%; 
    top: 0; 
    left: 0; 
    background-size: cover; 
} 
#mask1 { 
    background-image: url("http://test.coffeeshop.abcde.biz/cascara/img/bg_start.jpg"); 
} 
#mask2 { 
    background-image: url("http://test.coffeeshop.abcde.biz/cascara/img/bg_start2.jpg"); 
    display: none; /* Initial state */ 
} 

Answer 2

Вы даже можете сделать это без JS вообще. Существует много способов сделать это, но вот один: http://codepen.io/mbrillaud/pen/MwwgWZ

HTML

<div class="container"> 
    <img src="//lorempicsum.com/futurama/350/200/2" alt="" /> 
    <img src="//lorempicsum.com/futurama/350/200/1" alt="" /> 
</div> 

CSS

.container { 
    position: relative; 
} 

.container img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    transition: opacity 0.5s; 
} 
.container img:last-child:hover{ 
    opacity: 0; 
}