Выведение изображения на наведении курсора мыши, а затем исчезает в другой картине

Question

было интересно, если это возможно:

• Fade из изображения при наведении курсора мыши и затем исчезает в другой картине после первого замирания выхода.

Fade из легко с:

.overlay { 
    position: absolute; width: 269px; height: 344px; bottom:0; 
    left: 6%; z-index: 2; transition: opacity 1.5s ease; opacity:1; 
    } 

    .overlay:hover { opacity:0; } 

Изображения разного размера.

Answer 1

Отредактировано для использования чистого метода jQuery.

$(document).ready(function() { 
    var changed = false; 
    $(".overlay").mouseover(function() { 
     if(!changed) { 
      $(this).fadeTo("slow", 0, function() { 
       $(this).children('img').attr("src", "newjpg.jpg"); 
       $(this).fadeTo("slow", 1); 
      }); 
      changed = true; 
     } 
    }); 
}); 

jsFiddle: http://jsfiddle.net/8pFBB/

---

EDIT: С возможностью вернуться к старому образу & очереди, чтобы предотвратить анимации от укладки до бесконечности при перемещении мыши и от объекта неоднократно

$(document).ready(function() { 
    $(".overlay").queue("fadeFx"); 
    var fading = false; 
    $(".overlay").mouseover(function() { 
     if(fading) { $(".overlay").dequeue(); } 
     fading = true; 
     $(this).fadeTo("slow" , 0, function() { 
      $(this).children('img').attr("src", "http://placehold.it/350x150"); 
      $(this).fadeTo("slow" , 1); 
      fading = false; 
     }); 
    }); 
    $(".overlay").mouseout(function() { 
     if(fading) { $(".overlay").dequeue(); } 
     fading = true; 
     $(this).fadeTo("slow" , 0, function() { 
      $(this).children('img').attr("src", "http://placehold.it/150x350"); 
      $(this).fadeTo("slow" , 1); 
      fading = false; 
     }); 
    }); 
}); 

http://jsfiddle.net/8uVHF/

Answer 2

$('.overlay').hover(function() { 
$(this).fadeOut(); 
$(this).attr('src', 'newImage.png'); 
} 

Answer 3

Это должно работать и позволит вам сделать это полностью в JQuery

$(".overlay").hover(function() { 
    $(this).fadeTo("slow" , 0, function() { 
    $(this).attr("src", newIMGURL); 
     $(this).fadeTo("slow" , 1); 
    }); 
}); 

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