HTML on mouseover a[tag], changing img src attribute with css3 smooth transition

0
votes

This is my Code,

HTML

<ul id="submenu">
<li data-img="submenu1.jpg"><a href="#">Experience</a></li>
<li>....</li>
<li>....</li>
</ul>

<img id="company-image" data-original="company.jpg" src="company.jpg">

jQuery

$("#submenu li").hover(function() {
            $("#company-image").attr("src", $(this).data("img"));
        }, function(){
            $("#company-image").attr("src", $("#company-image").data("original"));
        });

here when i mouseover on the li, removing the existing img src value and adding new img name(submenu1.jpg), while this i need to show the transition for old to new img changing time. and onmouseout time need to show fadeout effect.

1
jqueryanimationtransitionmouseovermouseout

1 Answers

0
votes

Try the .fadeOut() function of them image.

$("#company-image").attr("src", $(this).data("img")).fadeOut(500);

here is the w3schools link http://www.w3schools.com/jquery/eff_fadeout.asp

you'll also have to set a setTimeout() on the new image loading

$("#submenu li").hover(function() {
        $("#company-image").attr("src", $(this).data("img").FadeOut(500));
    }, setTimeout(function(){
        $("#company-image").attr("src", $("#company-image").data("original"));
    }), 550);