添加淡入淡出到此jQuery翻转

Question

如何为这段jQuery添加淡入淡出或动画显示不透明度的变化？

由于

<script  type='text/javascript'>
$(document).ready(function(){
    $(".alain").hover(
        function() {$(this).attr("src","images/rollovers/alain-rollover.png");},
        function() {$(this).attr("src","thumbnails/alain-thumbnail.jpg");
    });
});
</script>

Answer 1

淡出图像，更改光源，将图像淡入淡出：

$(document).ready(function(){
    $(".alain").on('mouseenter mouseleave', function(e) {
        var src = e.type == 'mouseenter' ? 'images/rollovers/alain-rollover.png' : 'thumbnails/alain-thumbnail.jpg';

        $(this).fadeOut('slow', function() {
            $(this).prop('src', src).fadeIn('slow');
        });
    });
});

jsbin

如果旧浏览器不是问题，那么使用CSS3过渡添加和删除类似乎更容易。