Ajouter une transition en changeant img src avec javascript

J'ai une balise img qui je veux changer la src lors de pointage et tout fonctionne, mais je voudrais ajouter certains de transition de sorte qu'il n'a pas l'air si mauvaise, mais puisque c'est une img src je ne peux pas la cible avec les css.

http://jsfiddle.net/Ne5zw/1/

html

<img id="bg" src="img/img1.jpg">
<div onmouseover="imgChange('img/img2.jpg'); "onmouseout="imgChange('img/img1.jpg');">

js

function imgChange(im){
document.getElementById('bg').src=(im);
}

source d'informationauteur ernerock

  1. 4

    Vous souhaitez un fondu enchaîné. Fondamentalement, vous avez besoin pour positionner les deux images l'une sur l'autre, et d'en créer un de opacity à 0, de sorte qu'il sera caché:

    <div id="container">
    <img class="hidden image1" src="http://www.istockphoto.com/file_thumbview_approve/4629609/2/istockphoto_4629609-green-field.jpg">

    <img class="image2" src="http://www.istockphoto.com/file_thumbview_approve/9958532/2/istockphoto_9958532-sun-and-clouds.jpg" />
</div>

    CSS:

    .hidden{
 opacity:0;   
}

img{
    position:absolute;
    opacity:1;
    transition:opacity 0.5s linear;
}

    Avec un transition ensemble pour opacity sur les images, tout ce que nous devons faire est de le déclencher avec ce script:

    $(function(){
    debugger;
    $(document).on('mouseenter', '#hoverMe', function(){
        $('img').toggleClass('hidden');
    });
});

    http://jsfiddle.net/Ne5zw/12/

  2. -3

    j'ai l'habitude d'utiliser jquery pour cela. 

    $(document).on("mouseover", '.image_class', function () {
        $(this).attr('src', 'img/img2.jpg');
    });

$(document).on("mouseout", '.image_class', function () {
        $(this).attr('src', 'img/img1.jpg');
  });