FadeIn and fadeOut effect on onclick function

Question

Is it possible fadeIn , fadeOut or other effect on onclick function?

EG When click

<a href="#" onclick="document.getElementById('test').style.backgroundImage='url(img/test.jpg)'" ><span class="left">Test</span>></a>

change background within fade effect?

Answer 1

Try to add this style:

<style>
#test {

transition: background .1s linear;
-webkit-transition: background .1s linear;
-moz-transition: background .1s linear;
-o-transition: background .1s linear;

}
</style>

<a href="#" onclick="document.getElementById('test').style.backgroundImage='url(img/test.jpg)'" ><span class="left">Test</span>></a>

Answer 2

<a href="javascript:changeBackground('img/test.jpg')"><span class="left">Test</span>></a>
<div id="test" style="display: none;"></div>
<script>
    function changeBackground(src) {
        var img = new Image();
        img.src = src;
        img.onload = function () {
            $('#test').fadeIn();
        }
    }
</script>

You can do it with jQuery