javascript - onclick 函数的淡入淡出效果

Question

是否可能对功能有fadeIn、fadeOut或其他影响onclick？

EG 点击时

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

在淡入淡出效果中改变背景？

Answer 1

尝试添加这种样式：

<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>

你可以用 jQuery 做到这一点