FadeIn and fadeOut effect on onclick function

Question

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

E.G. 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?

http://stackoverflow.com/questions/12584481/simple-fade-in-fade-out-div-with-jquery-on-click — Krish R, Nov 15 '13 at 10:05

score 0 · Answer 1 · answered Nov 15 '13 at 10:08

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>

score 0 · Answer 2 · answered Nov 15 '13 at 10:10

<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

FadeIn and fadeOut effect on onclick function

2 Answers2